在 vue-cli3.0 中使用 Sass 全局变量
在 vue.config.js
文件中配置 css.loaderOptions
选项,官网地址:https://cli.vuejs.org/zh/guide/css.html#向预处理器-loader-传递选项 (opens new window)
# 安装 sass 相关依赖
npm install node-sass --save --dev # ^4.12.0
npm install sass-loader --save --dev # ^10.1.1
1
2
2
# 使用vue-cli官方配置
// vue.config.js
module.exports = {
css: {
loaderOptions: {
// 给 sass-loader 传递选项
// sass: {
// // @/ 是 src/ 的别名
// // 所以这里假设你有 `src/variables.sass` 这个文件
// // 注意:在 sass-loader v8 中,这个选项名是 "prependData"
// additionalData: `@import "@/style/variables.sass"`
// },
// 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
// 因为 `scss` 语法在内部也是由 sass-loader 处理的
// 但是在配置 `prependData` 选项的时候
// `scss` 语法会要求语句结尾必须有分号,`sass` 则要求必须没有分号
// 在这种情况下,我们可以使用 `scss` 选项,对 `scss` 语法进行单独配置
scss: {
additionalData: `@import "@/style/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'
// }
// }
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
# 定义全局变量
在 src/style/variables.scss
中定义了如下的全局变量:
$font-color: red;
1
# 使用定义碧昂量
<template>
<h1>标题</h1>
</template>
<script>
export default {
name: "login",
components: {},
data() {
return {};
},
methods: {},
};
</script>
<style lang="scss" scoped>
h1{
color: $font-color;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
注意
若出现错误 ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema
此报错,需提升 sass-loader 的版本到 ^10.1.1 即可。
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13