Vue 3.0 scss 全局变量
1.安装 scss
npm install sass-loader --save-dev
npm install node-sass --sava-dev
2.新建一个 ‘index.scss’:
$color: red;
3.在‘vue.config.js’中,加入代码:(需要重新运行项目)
css: {
loaderOptions: {
sass: {
additionalData: `@import "./src/assets/index.scss";`
}
}
}
也可以在vue中加入:(两种只能选一种,不然会报错)
<style lang="scss" scoped>
@import "@/assets/index.scss";
</style>
4.在vue文件中使用:
<style lang="scss" scoped>
.hello {
background: $color;
}
</style>
结束
如果想在script中获取,需要以‘.module.scss’文件格式命名,即‘index.module.scss’:
:export {
theme: $color;
}
在vue中使用:
import colors from "@/assets/index.module.scss";