错误:期望'styles'是一个字符串数组

Question

我一直在使用这个种子项目作为我的新Angular 2项目的基础.不幸的是,它没有配置为使用scss,所以我必须自己添加该配置.

我正在使用Angular Material,所以我在我的app组件中导入默认主题,如下所示:

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

但是,这会在运行时在浏览器中产生以下错误:

Uncaught Error: Expected 'styles' to be an array of strings.

我已经在我的webpack配置中尝试了各种配置,目前我正在使用这个:

{ 
    test: /\.css$/, 
    loaders: ['to-string-loader', 'css-loader'] 
},
{
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
    include: [helpers.root( 'src', 'styles' )]
}

在interweb上有一些对此错误的引用,但它们都没有解决我的问题.任何想法如何解决这一问题？

Answer 1

您只传递css文件而不是scss文件,to-string-loader因此require('./ material2-app-theme.scss')未返回字符串

将scss加载程序更改为...

{
    test: /\.scss$/,
    loaders: ['to-string-loader', 'css-loader', 'sass-loader'],
    include: [helpers.root( 'src', 'styles' )]
}

还要确保它./material2-app-theme.scss在include文件夹中

仅供参考您可以轻松地将这两个装载机组合成一个并简单地使用......

{
    test: /\.(css|scss)$/,
    loaders: ['to-string-loader', 'css-loader', 'sass-loader']
}

Answer 2

要完成此问题,如果您使用ExtractTextPlugin,"webpack.config.js"是:

{
    test: /\.(css|scss)$/,
    loaders: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: ['css-loader?sourceMap', 'scss-loader?sourceMap']
    })
}

然后我解决问题:

{
    test: /\.(css|scss)$/,
    loaders: ['to-string-loader'].concat(ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: ['css-loader?sourceMap', 'scss-loader?sourceMap']
    }))
}