全局SASS/SCSS变量在Vue项目中应用解决方案
场景说明
// 这是一个存放变量的scss文件 "@/styles/_variables.scss" // color font ... $cf-light: #B6B6B6; $cf-gray: #8C8C8C; $cf-med: #505050; $cf-dark: #333333; $cf-highlight: #1775F0;
我要在其他文件内都用这个来保证样式统一。比如某个组件
<template> <div class="notice">注意!</div> </template> <style lang="scss" scoped> .notice { color: $cf-highlight; } </style>
这样就报错了。要改成下面这样
<template> <div class="notice">注意!</div> </template> <style lang="scss" scoped> @import "@/styles/_variables.scss"; .notice { color: $cf-highlight; } </style>
简单描述一下:做Vue项目的时候,有时候我们预先设置了一个主题样式文件(_variables.scss
),存放大量的定义的SASS变量,需要在不同的组件中使用,默认是无法使用的,除非每个组件内都引入这个_variables.scss
文件,十分麻烦,这里提供几种方案。
解决办法
我有几个解决方案,理论上都可行,大家不妨根据实际应用场景来实践一下。
使用sass-resources-loader
如果项目使用Vue-cli 2/3,或者Vue项目用的Webpack,用这个loader都是可以的。官方对于各种场景已经写的很清楚了,请看sass-resources-loader。具体不说明了。
Vue-cli 3.x 下的最方便的方案
这个我还没实践,不过应该是可行的。。。给小白们自己去试,好用的话记得留言回复下哦~
打开vue.config.js
文件,进行如下配置:
module.exports = { css: { loaderOptions: { sass: { data: `@import "@/styles/_variables.scss";` } } } };
具体细节,请阅读:
- Globally Load SASS into your Vue.js Applications
- How to Import a Sass File into Every Vue Component in an App
这两篇原理相同,就是细节上有点不同,怕有的打不开就放两个给大家研究下。
Nuxt
这里还是接住一个插件style-resources-module,这个最近才出的,高级很多,在他之前,都是用nuxt-sass-resources-loader,如果你的项目还在用旧的,可以换成新的。nuxt-sass-resources-loader
官方也说了不在更新维护,建议使用style-resources-module
。
怎么用呢?这里有Example,我也复制一份,醒目。打开nuxt.config.js
export default { modules: ['@nuxtjs/style-resources'], styleResources: { scss: [ './assets/styles/_variables.scss', './assets/styles/_mixins.scss' // use underscore "_" & also file extension ".scss" ] } }
自己注意文件路径~
结语
现在不用每个组件都写导入变量文件了,是不是轻松多了,也不会因为文件名,路径调整,而胆战心惊的文件批量替换。
我为什么写这个文章,因为虽然以前研究过,但是时代变化很快,一些更好的方案出现了,但是很多人依旧采用旧的,可能在新的项目上带来一些问题,所以就更新了。
(小字,看不见):其次,我其实在使用easywebpack的egg+vue脚手架遇到了这个问题,搞了半天没搞好。。。去官方群里问没人鸟我,于是凄惨退群(底层技术渣的待遇)。参考: