reactjs - 删除重复的 sass 导入(webpack)

Question

我有一个包含很多 sass 文件的大项目(并且所有这些文件都导入了一个带有一些变量和类的主 sass 文件)。

我相信你们都知道我在所有 css 文件中导入的文件在构建项目后在主 css 文件中重复的问题。

我尝试使用 ExtractTextPlugin 选项和名为 OptimizeCssAssetsPlugin 的插件，但我没有找到解决此问题的方法。

这是我的 webpack prod 配置中的插件数组:

new ExtractTextPlugin({
          filename: "styles.css",
      }),
      new OptimizeCssAssetsPlugin({
          assetNameRegExp: /\.optimize\.css$/g,
          cssProcessor: require('cssnano'),
          cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },
          canPrint: true
      }),

有人知道这个问题的解决方案吗？

谢谢你!

Answer 1

少用户有福了! @import (reference) 正是这样做的:

使用@import(引用)导入外部文件，但除非引用，否则不会将导入的样式添加到编译输出中。
但是在 Stylus/Sass 中，没有直接通过引用导入的方法:

您将获得的最接近的是一个无声类/占位符。这些工作与 LESS 和引用的工作方式略有不同，您可以在此处阅读有关它们的更多信息:http://blog.teamtreehouse.com/extending-placeholder-selectors-with-sass

引用:Rerernce