现在可以使用 angular2、带有热模块替换的 webpack、sass 源映射和外部加载的 css。我花了几天的时间玩它，但我成功了！
依赖有style-loader、css-loader、sass-loader（如果使用sass，如果没有，可以去掉sass loader）
我在生产模式下使用 ExtractTextPlugin 来生成实际的 .css 文件。
注意：为了让它工作，我不使用 stylesUrl 属性，而是在 @Component 装饰器之外导入 .scss 文件，以便样式在全局上下文中加载，而不是由组件限定。
此配置允许使用 webpack 开发服务器将热模块替换为 SCSS 文件，并为生产模式提取文本插件以发出实际的 .css 文件。
这是我的工作配置
{
test: /\.(scss)$/,
use:
isDevServer ? [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: { sourceMap: true }
},
{
loader: 'postcss-loader',
options: { postcss: [AutoPrefixer(autoPrefixerOptions)], sourceMap: true }
},
{
loader: 'sass-loader',
options: { sourceMap: true }
},
{
loader: 'sass-resources-loader',
options: {
resources: [
'./src/assets/styles/variables.scss',
'./src/assets/styles/mixins.scss']
}
},
/**
* The sass-vars-loader will convert the 'vars' property or any module.exports of
* a .JS or .JSON file into valid SASS and append to the beginning of each
* .scss file loaded.
*
* See: https://github.com/epegzz/sass-vars-loader
*/
{
loader: '@epegzz/sass-vars-loader?',
options: querystring.stringify({
vars: JSON.stringify({
susyIsDevServer: susyIsDevServer
})
})
}] : // dev mode
ExtractTextPlugin.extract({
fallback: "css-loader",
use: [
{
loader: 'css-loader',
options: { sourceMap: true }
},
{
loader: 'postcss-loader',
options: { postcss: [AutoPrefixer(autoPrefixerOptions)], sourceMap: true }
},
{
loader: 'sass-loader',
options: { sourceMap: true }
},
{
loader: 'sass-resources-loader',
options: {
resources: [
'./src/assets/styles/variables.scss',
'./src/assets/styles/mixins.scss']
}
}, {
loader: '@epegzz/sass-vars-loader?',
options: querystring.stringify({
vars: JSON.stringify({
susyIsDevServer: susyIsDevServer
})
// // Or use 'files" object to specify vars in an external .js or .json file
// files: [
// path.resolve(helpers.paths.appRoot + '/assets/styles/sass-js-variables.js')
// ],
})
}],
publicPath: '/' // 'string' override the publicPath setting for this loader
})
},
然后，在您的组件中，例如app.component.ts，您将需要您的app.style.scss 文件在@Component 装饰器的外部。
这就是诀窍。如果您使用stylesUrl 以“角度方式”加载样式，这将不起作用。这样做可以让你为延迟加载的组件延迟加载.css 样式表，从而使初始加载时间更快。
app.component.css
/*
* THIS IS WHERE WE REQUIRE CSS/SCSS FILES THAT THIS COMPONENT NEEDS
*
* Function: To enable so-called "Lazy Loading" CSS/SCSS files "on demand" as the app views need them.
* Do NOT add styles the "Angular2 Way" in the @Component decorator ("styles" and "styleUrls" properties)
*/
import './app.style.scss'
/**
* AppComponent Component
* Top Level Component
*/
@Component({
selector: 'body',
encapsulation: ViewEncapsulation.None,
host: { '[class.authenticated]': 'appState.state.isAuthenticated' },
templateUrl: './app.template.html'
})
我在运行此设置时没有遇到任何问题。给你！
2017 年 8 月更新：改进了 webpack 3+ 架构要求的配置，并适用于 Angular 4 AOT 编译。