错误：预期的“样式”是字符串数组

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

是 webpack 的 raw-loader 导致了这个错误

如果您使用的是 raw-loader，请摆脱它并使用 to-string-load

所以安装它

npm i to-string-loader --save-dev
or
yarn add to-string-loader

这是我的配置部分

rules: [
 {
        test: /\.scss$/,
        exclude: [/node_modules/, /\.global\.scss$/],
        use: ["to-string-loader", "css-loader", "sass-loader"]
      }
]

Answer 2

这是适合我加载 .css 文件的配置。

packages.json:

"devDependencies": {
    .....
    "to-string-loader": "^1.1.5",
    "css-loader": "^0.28.11"
}    

webpack.js：

module: {
    rules: [
        .....
        {
            test: /\.css$/,
            loaders: ["to-string-loader", "css-loader"]
        }
    ]
}

App.component：

@Component({
    .....
    styleUrls: ["./app.component.css"]
})

Answer 3

或者，将一个内联加载程序添加到加载程序数组，无需额外安装

loaders: ['exports-loader?module.exports.toString()', other-loader]

Answer 4

为了完成问题，如果你使用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']
    }))
}

Answer 5

您只是将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']
}