web-dev-qa-db-ja.com

エラー： 'styles'は文字列の配列であると予想されます

私は このシードプロジェクト を新しい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 configでさまざまな設定を試しましたが、現在これを使っています：

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

インターウェブにはこのエラーへの参照がいくつかありますが、どれも私の問題を解決しません。これを修正する方法はありますか？

angularsasswebpack
9
serlingpa

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フォルダーにあることも確認してください

[〜＃〜] fyi [〜＃〜]これら2つのローダーを1つに簡単に組み合わせて、単に使用することができます...

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

問題を完了するために、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']
    }))
}
15
riofly

これは、.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"]
})
0
Vedran

または、1つのインラインローダーをローダーアレイに追加します。追加のインストールは不要です

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