为什么我的代码会复制文件的 css？答案

【问题标题】：Why does my code duplicate the css of a file?为什么我的代码会复制文件的 css？
【发布时间】：2022-01-13 19:26:15
【问题描述】：

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

我@import字体的位置，在字体的函数里做@include，在这个函数里我只是选择我要使用的字体。

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

它会在我生成的 .scss 文件中生成重复的代码。我想知道这方面有哪些好的做法，如果我做得对，如何避免 .scss 中的这些重复？

【问题讨论】：

标签： sass node-sass

【解决方案1】：

由于我看不到您的代码，我不确定您是如何准确导入资源的。但是，如果您只生成一个.css 文件，一个好的做法是导入将要编译的文件中的所有内容，而不是每个部分。

假设您有以下结构：

styles
├─ components
│   ├─ _footer.scss
│   └─ _navbar.scss
├─ settings
│   ├─ _functions.scss
│   └─ _mixins.scss
└─ styles.scss

在这个例子中，styles.sccs 是唯一会被编译的，它只会用于导入所有的部分（顺序很重要）：

// Settings

@import './settings/mixins';
@import './settings/functions';

// Components

@import './components/footer';
@import './components/navbar';

然后，您可以在组件中使用任何 mixin 或函数，并且所有内容都只导入一次。

【讨论】：

【解决方案2】：

我不确定这是否能回答你的问题——但为了防止在 Sass 中出现重复，我会创建一个 mixin 来检查是否已经创建了 @include

SCSS

//  Global list to keep track of what mixins has been included 
$include-once: (); 

//  Mixin helper to be used inside other mixins we would like 
//  not to produce duplicate content
@mixin once($mixin-name) {
   //  check if mixin name exists in our list 
   @if not index($include-once, $mixin-name) {

       //  add mixin name to list (using the global flag)
       $include-once: append($include-once, $mixin-name) !global;

       //  print out the content of the mixin
       @content;
   } 
}



//  Use example
@mixin font {
    //  wrap content in the include once wrapper passing the name of the mixin 
    @include once(font){

        //  make sure font import is not nested 
        @at-root {
            @import url("https://fonts.googleapis.com/css?family=Open+Sans");
        }
    }
}


//  Test
.foo { @include font; color: red; }
.bar { @include font; color: green; }
.baz { @include font; color: blue; }

CSS 输出

@import url("https://fonts.googleapis.com/css?family=Open+Sans")
.foo {
  color: red;
}
.bar {
  color: green;
}

.baz {
  color: blue;
}

【讨论】：

【解决方案3】：

我玩游戏有点晚了，但我遇到了这个问题，并且有部分内容或使用 @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 使其工作。

请记住，下面的 sn-p 最小化并缩小了 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()
    ]
  }
};
´´´

【讨论】：