Vue--整合Scss--使用/实例

清疚 2023-09-29 16:42 15阅读 0赞

原文网址：[Vue--整合Scss--使用/实例\_IT利刃出鞘的博客-CSDN博客][Vue--_Scss--_IT_-CSDN]

## 简介 ##

**说明**

本文用示例介绍Vue如何整合Scss。

**注意**

本文介绍的是添加node-sass和sass-loader。目前推荐使用sass（dart-sass）替换node-sass，见：[Scss--将node-sass切换为sass（原dart-sass）\_IT利刃出鞘的博客-CSDN博客][Scss--_node-sass_sass_dart-sass_IT_-CSDN]

## 创建Vue项目 ##

创建方法见：[@vue/cli4--使用图形化界面创建项目--方法/实例\_IT利刃出鞘的博客-CSDN博客][vue_cli4--_--_IT_-CSDN]

需要注意的是，上边这个网址中的“选择组件”这一步，需要选择CSS 预处理器（“CSS Pre-processors”），并选择“Sass/SCSS (with node-sass)”

![50d5f69af3964ddb81a77b1548100679.png][]

![579239fdbcb146ddb5c394a602b28b09.png][]

本处我创建的项目为：demo\_vue\_scss，如下图所示：

![ab6e9330b39c45f99ae304d29b45c90e.png][]

## 安装Scss依赖（如果没安装） ##

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

首先进入项目的根目录（本文是demo\_vue\_scss目录），然后执行如下命令：

npm install -D node-sass@4.14.1 sass-loader@7.3.1

执行完之后可以发现，package.json中加入了sass-loader和node-sass依赖：

![cb1c0652c0a1450b807acfe2d73f95b0.png][]

**注意**：

如果直接引入最新版会有问题，比如：

npm install -D node-sass sass-loader

这样引入的是最新版本的，一般会因为版本不匹配而导致报错。解决方法见：[Vue--解决Scss报错：Syntax Error: TypeError: this.getOptions is not a function\_IT利刃出鞘的博客-CSDN博客][Vue--_Scss_Syntax Error_ TypeError_ this.getOptions is not a function_IT_-CSDN]

## 配置（非必须） ##

**实际上，在安装了sass-loader之后，无需任何配置即可使用**。vue-loader预处理器会自动根据lang属性判断出要使用的loaders。

下边介绍自己想要个性化配置时的方法。

**方案1：vue.config.js**

官网：[https://cli.vuejs.org/zh/guide/css.html\#向预处理器-loader-传递选项][https_cli.vuejs.org_zh_guide_css.html_-loader-]

module.exports = {
      css: {
        loaderOptions: {
          // 给 sass-loader 传递选项
          // sass: {
          //   // @/ 是 src/ 的别名
          //   // 所以这里假设你有 `src/variables.sass` 这个文件
          //   // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
          //   //       在 sass-loader v8-中，这个选项名是 "data"
          //   additionalData: `@import "~@/variables.sass"`
          // },
          
          // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
          // 因为 `scss` 语法在内部也是由 sass-loader 处理的
          // 但是在配置 `prependData` 选项的时候
          // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
          // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
          scss: {
            additionalData: `@import "~@/variables.scss";`
          },
          
          // 给 less-loader 传递 Less.js 相关选项
          // less:{
          //   // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
          //   // `primary` is global variables fields name
          //   globalVars: {
          //     primary: '#fff'
          //   }
          // }
        }
      }
    }

**方案2：/build/webpack.base.conf.js**

在webpack.base.conf.js 文件里配置 rules：

rules:[
        // ...
        
        {
            test: /\.scss?$/,
            loaders: ["style", "css", "sass"]
        }
    ]

## 代码 ##

### views下添加页面（使用scss） ###

在/src/views下新建Demo.vue，内容如下：

<template>
      <div>
        这是SCSS测试
      </div>
    </template>
    
    <script>
    export default {
      name: "Demo"
    }
    </script>
    
    <style scoped lang="scss">
    $color: red;
    div {
      color: $color;
    }
    </style>

### App.vue里引入 ###

<template>
      <div id="app">
        <div id="nav">
          <router-link to="/">Home</router-link> |
          <router-link to="/about">About</router-link>
        </div>
        
        <demo></demo>
      </div>
    </template>
    
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
    }
    
    #nav {
      padding: 30px;
    }
    
    #nav a {
      font-weight: bold;
      color: #2c3e50;
    }
    
    #nav a.router-link-exact-active {
      color: #42b983;
    }
    </style>
    
    <script>
    import Demo from "./views/Demo";
    export default {
      components: {Demo}
    }
    </script>

改动指出之处如下：

![9f4b16cd715444eea51cffe89cc78aa9.png][]

## 测试 ##

启动服务：npm run serve

启动完毕后，访问：[http://localhost:8080/][http_localhost_8080]

结果：

![51a81d410e674490826211b34092cafb.png][]

[Vue--_Scss--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125625169
[Scss--_node-sass_sass_dart-sass_IT_-CSDN]: https://knife.blog.csdn.net/article/details/126372260
[vue_cli4--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125397525
[50d5f69af3964ddb81a77b1548100679.png]: https://img-blog.csdnimg.cn/50d5f69af3964ddb81a77b1548100679.png
[579239fdbcb146ddb5c394a602b28b09.png]: https://img-blog.csdnimg.cn/579239fdbcb146ddb5c394a602b28b09.png
[ab6e9330b39c45f99ae304d29b45c90e.png]: https://img-blog.csdnimg.cn/ab6e9330b39c45f99ae304d29b45c90e.png
[cb1c0652c0a1450b807acfe2d73f95b0.png]: https://img-blog.csdnimg.cn/cb1c0652c0a1450b807acfe2d73f95b0.png
[Vue--_Scss_Syntax Error_ TypeError_ this.getOptions is not a function_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125687365
[https_cli.vuejs.org_zh_guide_css.html_-loader-]: https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9
[9f4b16cd715444eea51cffe89cc78aa9.png]: https://img-blog.csdnimg.cn/9f4b16cd715444eea51cffe89cc78aa9.png
[http_localhost_8080]: http://localhost:8080/
[51a81d410e674490826211b34092cafb.png]: https://img-blog.csdnimg.cn/51a81d410e674490826211b34092cafb.png