现在可以使用 angular2、带有热模块替换的 webpack、sass 源映射和外部加载的 css。我花了几天的时间玩它，但我让它工作了！
依赖项是style-loader, css-loader, 和sass-loader（如果使用 sass，如果没有，可以删除 sass 加载器）
我将 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您需要在 @Component 装饰器之外app.style.scss的文件。
这就是诀窍。如果您使用“角度方式”加载样式，这将不起作用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'
})
我运行这个设置没有问题。干得好！
更新于 08/2017：改进了 webpack 3+ 架构要求的配置，并与 Angular 4 AOT 编译一起使用。