Init

我试图使用webpack与sass-loader和postcss-loader . 我已经尝试了不同的解决方案但没有任何工作像我想要的那样 .

我使用raw-loader和sass-loader尝试了Angular 2 Starter Pack的解决方案，但是postcss-loader没有工作 .

Code

角度2分量

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls:  ['./app.component.scss']
    // styles: [
    //     require('./app.component.scss')
    // ]
})

Webpack模块加载器

{
    test: /\.scss$/,
    loaders: ['to-string-loader', 'css-loader', 'postcss-loader', 'resolve-url-loader', 'sass-loader']
}

Problem

使用这些代码行一切正常，但样式将添加到 <style> 标记内的 <head> 标记中 . 在某些时候，我会有数百种样式线，我想避免 .

如果我将加载程序代码更改为：

loader: ExtractTextPlugin.extract('to-string-loader', 'css-loader', 'postcss-loader', 'resolve-url-loader', 'sass-loader?sourceMap')

并将其添加到webpack配置

plugins: [
    new ExtractTextPlugin('style.css')
]

它会导致错误

未捕获错误：预期'styles'是一个字符串数组 .

style.css实际上是在html代码中链接的 .

我正在寻找一个允许我使用sass，postcss和单个.css文件的解决方案 .

angularjs angular sass webpack postcss