原文网址：Vue--整合Scss--使用/实例_IT利刃出鞘的博客-CSDN博客
简介
本文用示例介绍Vue如何整合Scss。
创建Vue项目
创建方法见：@vue/cli4--使用图形化界面创建项目--方法/实例_IT利刃出鞘的博客-CSDN博客
需要注意的是，上边这个网址中的“选择组件”这一步，需要选择CSS 预处理器（“CSS Pre-processors”），并选择“Sass/SCSS (with node-sass)”
本处我创建的项目为：demo_vue_scss，如下图所示：
安装Scss依赖（如果没安装）
如果在创建项目时没有选择CSS 预处理器，我们也可以手动安装sass-loader node-sass来集成scss。
首先进入项目的根目录（本文是demo_vue_scss目录），然后执行如下命令：
npm install -D [email protected] [email protected]执行完之后可以发现，package.json中加入了sass-loader和node-sass依赖：
注意：
如果直接引入最新版会有问题，比如：
npm install -D node-sass sass-loader这样引入的是最新版本的，一般会因为版本不匹配而导致报错。解决方法见：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-传递选项
module.exports = {
css: {
loaderOptions: {
// 给 sass-loader 传递选项
// sass: {
// // @/ 是 src/ 的别名
// // 所以这里假设你有 `src/variables.sass` 这个文件
// // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
// 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>
<!--<router-view/>-->
<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>
改动指出之处如下：
测试
启动服务：npm run serve
启动完毕后，访问：http://localhost:8080/
结果：
