当前位置：首页 > article >正文

Sass 同时导出JavaScript 和 CSS变量

article 2025/2/24 13:26:25

Sass 官网

安装插件

注意 sass-loader 版本没设太高，否则会报错 Syntax Error: TypeError: this.getOptions is not a function

npm i sass sass-loader@10 -D

创建 Sass 文件

variables.module.scss。注意这里是 module.scss：

否则报错 Can't find stylesheet to import；
前缀.module，被认为是一个CSS模块文件，导入时会返回一个相应的模块对象；

$testBg01: red;
$testBg02: blue;
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
    testBg01: $testBg01;
    testBg02: $testBg02;
}

vue 中使用

代码第 9 行，在 js 中引入为 JavaScript 变量；
代码第 19 行，在 css 中引入为 CSS 变量；

<template>
    <div>
        <div class="box box01"></div>
        <div class="box box02"></div>
    </div>
</template>

<script>
import variables from '../assets/variables.module.scss';

export default {
    mounted() {
        
        console.log('variables', variables);
    }
}
</script>
<style lang="scss" scoped>
@import '../assets/variables.module.scss';

.box {
    display: inline-block;
    width: 100px;
    height: 100px;
}
.box01 {
    background: $testBg01;
}
.box02 {
    background: $testBg02;
}
</style>

控制台输出
在这里插入图片描述