八、sass-loader的使用 ------ 2019-04-23

Posted 2023-05-02

参考技术A 一、sass-loader的作用和处理流程：

（1）作用：帮助webpack打包scss文件；

（2）处理流程：scss-loader是将scss格式的样式，先帮我们转换成css格式的样式，再交给css-loader根据各个文件的依赖关系整合成一段css，最后再交给style-loader帮我们挂载到页面的header部分；

二、安装：使用sass-loader需要安装两个依赖：sass-loader和node-sass

注意： node-sass可能由于翻墙的 原因安装失败，我们可以使用cnpm安装

三、sass-loader的配置：

由于sass-loader始终都是帮我们处理样式文件的，只不过是将scss语法的样式转换成css语法的样式，因此，sass-loader是和样式处理loader在一起的；

Sass-loader 不替换变量？

【中文标题】Sass-loader 不替换变量？

【英文标题】：Sass-loader not replacing variables?

【发布时间】：2018-11-22 03:34:39

【问题描述】：

不久前，我做了一个项目，它使用了 SASS 变量和 CSS 自定义属性的组合。我定义了我的 Sass 变量，然后使用这些变量来创建我的 CSS 自定义属性。一切都很好。现在我正在尝试做完全相同的事情，使用相同的代码和加载器（Webpack），但它不起作用，我不知道为什么。

我有一个如下所示的style.scss 文件：

$var1: #ff3344;
h1  color: $var1; 
:root  --color1: $var1; 

当我使用 sass-loader、css-loader 和 style-loader 使用 Webpack 构建项目时，我得到以下输出：

h1  color: #ff3344; 
:root  --color1: $var1; 

由于某种原因，$var1 被替换为 h1 而不是 --color1。

看到我之前这样做没有问题，我预计sass-loader 可能是原因。但我将sass-loader 降级为 6.0.7，这与我在项目中使用的版本相同，但我仍然遇到这个问题。为什么sass-loader 分配给--color1 时不替换$var1？

【问题讨论】：

你确定这有效吗？ :root --color1: $var1; . 现有的 sass 编译器不会转换这个

另一方面，这有效：root --color1: #$var1;

我确定。这是我工作项目中的一些示例代码：:root @each $name, $color in $page-colors --color-#$name: $color;

我想使用# 会起作用。但我不明白为什么我在以前的项目中不必这样做。就像上面一样，我有大约 100 个 CSS 属性分配给 Sass 变量，而且效果很好。

尝试比较 node-sass 版本。这很可能是新版本中的一个错误

【参考方案1】：

自定义变量值仅支持 # 内的 SassScript。

例如，如果你想拥有一组颜色：

$blue:    #007bff !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #28a745 !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;

$colors: () !default;
$colors: map-merge((
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
), $colors);

@each $color, $value in $colors 
    --#$color: #$value;