Question

在同一文件中使用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和所有加载器都在最新发布。

Answer 1

此问题已打开here

可能是使用CommonChunkPlugin的原因。

就我而言，原因是使用ExtractTextPlugin来压缩样式表中的classNames，比如

＆＃13;

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

＆＃13;

实际上，在我的情况下，样式表没有混合，但有其他类，因此reset.scss文件具有主要优先级。查看您的webpack.config.js文件，即在prod模式下压缩样式的位置。

webpack以错误的顺序解析CSS / SASS导入

1 个答案: