Question

我有一个很大的项目，其中包含许多sass文件（并且所有文件都导入了带有一些变量和类的主sass文件）。

我相信大家都知道这样的问题：我在所有css文件中导入的文件在建立项目后在主css文件中重复。

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

这是我的webpack产品配置中的插件数组：

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（引用）完全可以实现以下目的：

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

您将获得的最接近的是无声类/占位符。这些工作方式与LESS和参考的工作方式略有不同，您可以在这里阅读更多内容：http://blog.teamtreehouse.com/extending-placeholder-selectors-with-sass

参考：Rerernce

删除重复的sass导入（webpack）

1 个答案: