时间戳

首页 > 解决方案 > 为什么我的代码会复制文件的 css？

sass - 为什么我的代码会复制文件的 css？

问题描述

在 Sass 中，我有一些组件（导航栏、页脚）和一些@mixins（字体）以及一个控制字体的函数。

我@import在字体@include的功能中做字体的位置，在这个功能中我只是选择我要使用的字体。

问题是，当我将组件（导航栏和页脚）分离为“部分”时，它们具有相同的来源，并且我@import在每个.scss中提供了这些来源。

并且它会在我生成的.scss文件中生成重复的代码。我想知道对此有什么好的做法，如果我做得对，如何避免在.scss中出现这些重复？

标签： sassnode-sass

解决方案

我玩游戏有点晚了，但我遇到了这个问题，并且有部分内容或使用 @include 不起作用。它为我做的是使用即 css-nano-webpack-plugin https://www.npmjs.com/package/cssnano-webpack-plugin。我正在使用 webpack v5，因此无法使用 webpack mini-css-extract-plugin https://www.npmjs.com/package/mini-css-extract-plugin使其工作。

请记住，下面的代码片段最小化并缩小了 css PER scss 文件。因此，文件之间的重复可能仍会出现在 .css 输出文件中。

所以，像这样将它包含在你的 webpack 配置中（来源是 npmjs cssnano-webpack-plugin 站点）

const CssnanoPlugin = require('cssnano-webpack-plugin');
 
module.exports = {
  module: {
    loaders: [
      {
        test: /.s?css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  optimization: {
    minimizer: [
      new CssnanoPlugin()
    ]
  }
};
´´´

推荐阅读