angular - 错误 : Expected 'styles' to be an array of strings

Question

我一直在使用this seed project作为我新的 Angular 2 项目的基础。不幸的是，它没有配置为使用 scss，所以我必须自己添加该配置。

我正在使用 Angular Material所以我在我的应用程序组件中导入默认主题，如下所示:

@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' )]
}

网上有一些关于此错误的引用，但没有一个能解决我的问题。有什么解决办法吗？

Answer 1

您只是将 css 文件而不是 scss 文件传递​​给 to-string-loader，所以 需要('./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']
}