引入 sass-loader node-sass

方式一：创建项目时选择预处理器sass

1
2
3
4
5
# 1. 创建项目，示例 vue create vuedemo
# 2. 移动上下键，选择 Manually select features
# 3. 移动上下键在CSS Pre-processors，点击空格键选择CSS-processors
# 4. 选择 SCSS/SASS 作为我们的CSS预处理器
# 完成后项目会帮我们自动安装sass-loader 以及 node-sass依赖。另外版本需要与当前node版本相匹配

方式二：手动安装sass-loader

如果在创建项目没有选择CSS 预处理器，我们也可以手动安装sass-loader以及 node-sass来集成scss

1
2
# 安装指定版本，与当前 node16.x 版本相匹配
yarn add sass-loader@10.2.0 node-sass@6.0.1 -D

vue-cli3 自动引入变量文件

  1. 安装 style-resources-loader

    1
    2
    vue add style-resources-loader 
    选择 SCSS 预处理器

  2. 在 vue.config.js 中找到 pluginOptions , 修改配置。指定 css 变量定义的文件路径

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    const path = require("path")

    module.exports = {
      // 其它配置 ...
      // 需要修改的配置如下
      pluginOptions: {
        "style-resources-loader": {
          preProcessor: "scss",
          patterns: [path.resolve(__dirname, "./src/assets/variables.scss")],
        },
      },
    }

使用

  • variables.scss 中定义变量
1
$primary-color: #2210e8;
  • main.scss 中引用变量
1
2
3
4
5
6
7
.van-grid-item__icon {
  color: $primary-color;
}

.van-nav-bar__text {
  color: $primary-color;
}
  • App.vue 中引入全局样式
1
2
3
<style lang="scss">
@import './main.scss';
</style>

版本对应关系

node 和 node-sass 版本对应关系

node-sass - npm (npmjs.com)

NodeJS Supported node-sass version Node Module
Node 20 9.0+ 115
Node 19 8.0+ 111
Node 18 8.0+ 108
Node 17 7.0+, <8.0 102
Node 16 6.0+ 93
Node 15 5.0+, <7.0 88
Node 14 4.14+, <9.0 83
Node 13 4.13+, <5.0 79
Node 12 4.12+, <8.0 72
Node 11 4.10+, <5.0 67
Node 10 4.9+, <6.0 64
Node 8 4.5.3+, <5.0 57
Node <8 <5.0 <57

node-sass 对应的 sass-loader 部分版本号

sass-loader 4.1.1，node-sass 4.3.0
sass-loader 7.0.3，node-sass 4.7.2
sass-loader 7.3.1，node-sass 4.7.2
sass-loader 7.3.1，node-sass 4.14.1
sass-loader 10.0.1，node-sass 6.0.1