vue-cli4.x 使用 scss 全局变量设置使用
更新时间：2020-09-03 00:23:52 来源： 阅读量：
【摘要】 vue-cli4.x 使用 scss 全局变量设置使用考必过小编为大家整理了关于vue-cli4.x 使用 scss 全局变量设置使用的信息，希望可以帮助到大家！
vue-cli4.x 使用 scss 全局变量设置使用
标签：logheaderase变量ref方案netoat解决方案
目录
本记录仅针对于 vue-cp4.x 使用 scss 全局变量设置使用
确定依赖包
相关配置
使用
本记录仅针对于 vue-cp4.x 使用 scss 全局变量设置使用
在网上也找了很多版本的方法，尝试后都不可行。由于我使用的是 vue-cp4.x 脚手架搭建的项目，在网上也找到一个解决方案，特此记录。
确定依赖包
先在 package.json 文件中确定是否集成了 sass 相关的包 node-sass 和 sass-loader. 若没集成，需要先进行相关安装。
npm install node-sass
npm install sass-loader
相关配置
在安装完相关依赖后，需要在 vue.config.js 中进行相关配置，重点配置路径。 路径后面的 ;是必须的
modpe.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>
vue-cp4.x 使用 scss 全局变量设置使用
标签：logheaderase变量ref方案netoat解决方案
以上就是vue-cli4.x 使用 scss 全局变量设置使用的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！
上一篇：JS将时间戳转化成年-月-日
下一篇：js第四天