2

css と sass のインポートを同じファイルで使用すると、生成された css の順序が正しくありません。

完全な例は、 https ://github.com/p0wl/webpack-jimdo-example/tree/master/sass-order で確認および再現できます。

次の設定があるとします。

@import 'some.sass';

.legacy_bundle {
    content: 'legacy_bundle';
}

@import 'middle.css';
@import 'other.sass';

出力：

.middle {
    content: 'middle';
}.some {
  content: 'some'; }

.legacy_bundle {
  content: 'legacy_bundle'; }

.other {
  content: 'other'; }

/*# sourceMappingURL=new_cms_classes.css.map*/

.middle最初のインポートではありませんが、最初のルールです。.some最初のインポートであるため、最初のルールにする必要があります。

webpack.config.js (抜粋):

    entry: {
        "new_cms_classes.css": "legacy_bundle.css"
    },
    module: {
        loaders: [
            [
                {
                    test: /\.sass$/,
                    // Passing indentedSyntax query param to node-sass
                    loader: "sass?indentedSyntax"
                },
                {
                    test: /legacy_.+\.css$/,
                    loader: ExtractTextPlugin.extract("style-loader", "css-loader?root=~!sass")
                },
                { 
                    test: /\.css$/, loaders: ["style", "css?root=~"] 
                }
            ]
        ]
    },

webpack とすべてのローダーは最新リリースです。

4

1 に答える 1

0

この問題はここで開かれています

もしかしたら、CommonChunkPlugin を使用していることが原因かもしれません。

私の場合、理由は、次のように、スタイルシートのクラス名を圧縮するために ExtractTextPlugin を使用していたことです。

  if (isProd) {
     config.module.loaders[1].loader = ExtractTextPlugin.extract('style', 
                                                                 'css?modules&sourceMap&localIdentName[local]_[hash:base64:10]!sass!css');
  }

実際、私の場合、スタイルシートは混在していませんでしたが、他のクラスがあったため、reset.scss ファイルが優先されました。prod モードでスタイルを圧縮する場所である webpack.config.js ファイルを確認してください。

于 2016-05-13T11:20:51.640 に答える