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

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

Answer 1

您只是将css个文件而不是scss个文件传递给to-string-loader，因此需要（＆＃39; ./ material2-app-theme。 scss＆＃39;）没有返回字符串

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

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

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

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

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

Answer 3

或者，将一个内联加载器添加到加载器阵列，无需额外安装

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

Answer 4

这是适用于我加载.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 5

是来自webpack的原始加载程序导致了此错误

如果您使用的是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"]
      }
]

错误：预期＆＃39;样式＆＃39;成为一个字符串数组

5 个答案: