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 的原因。

在我的例子中，原因是在样式表中使用 ExtractTextPluginto 压缩类名，像这样

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

实际上，就我而言，样式表并没有混合，而是有其他类，因此 reset.scss 文件具有主要优先级。检查你的 webpack.config.js 文件，在 prod 模式下压缩样式的地方。

于 2016-05-13T11:20:51.640 回答