vue-cli4.x 使用 scss 全局变量设置使用

本记录仅针对于 vue-cli4.x 使用 scss 全局变量设置使用

在网上也找了很多版本的方法，尝试后都不可行。由于我使用的是 vue-cli4.x 脚手架搭建的项目，在网上也找到一个解决方案，特此记录。

 

确定依赖包

先在 package.json 文件中确定是否集成了 sass 相关的包 node-sass 和 sass-loader. 若没集成，需要先进行相关安装。

npm install node-sass npm install sass-loader

 

相关配置

在安装完相关依赖后，需要在 vue.config.js 中进行相关配置，重点配置路径。 路径后面的 ;是必须的

module.exports = { css: { loaderOptions: { sass: { prependData: `@import "./src/assets/styles/base";`, }, }, }, }

 

使用

在需要使用全局样式的地方，就可以进行使用 base.scss 文件中定义的样式。但是得注意在 加 lang="scss"

logo.vue 文件中使用。

<style lang="scss" scoped> .logo { float: left; height: $header-height; } </style>