vue如何引入sass全局变量
程序员文章站
2022-03-21 20:45:19
sass或者less都提供变量设置,在需求切换主题的项目中使用less或者sass变量,只要修改变量值,编译后所有用到该变量的样式都会被修改为你想要的效果,但是在vue-c...
sass或者less都提供变量设置,在需求切换主题的项目中使用less或者sass变量,只要修改变量值,编译后所有用到该变量的样式都会被修改为你想要的效果,但是在vue-cli搭建的项目中,在main.js中全局引入一个scss文件,在其中定义变量在其他组件或者页面中引用报变量未定义错误,其他的样式可以正常显示,显然是编译的问题。
傻瓜式引用
在每个用到全局变量的组件都引入该全局样式文件
@import 'path/filename.scss'
但是组件或者页面不在统一层目录下,引入的路径可能也会有差异,所以还是看看 sass-resources-loader
的解决方法吧。
sass-resources-loader引入sass全局变量
sass-resources-loader可以访问sass资源任何一个需要访问的sass模块。所以,可以使用共享变量和混合所有sass样式,而不去每个文件都引用。
安装sass-resources-loader
npm install --save-dev sass-resources-loader
修改sass配置
在 build
文件夹下找到 util.js
修改sass编译器loader的配置
// 全局文件引入 当然只想编译一个文件的话可以省去这个函数 function resolveresource(name) { return path.resolve(__dirname, '../static/style/' + name); } function generatesassresourceloader() { var loaders = [ cssloader, 'sass-loader', { loader: 'sass-resources-loader', options: { // 多个文件时用数组的形式传入,单个文件时可以直接使用 path.resolve(__dirname, '../static/style/common.scss' resources: [resolveresource('common.scss')] } } ]; if (options.extract) { return extracttextplugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } }
修改sass配置的调用为 generatesassresourceloader()
return { css: generateloaders(), postcss: generateloaders(), less: generateloaders('less'), // vue-cli默认sass配置 // sass: generateloaders('sass', { indentedsyntax: true }), // scss: generateloaders('sass'), // 新引入的sass-resources-loader sass: generatesassresourceloader(), scss: generatesassresourceloader(), stylus: generateloaders('stylus'), styl: generateloaders('stylus') }
在 main.js
中引用 common.scss
文件,重启服务,其中定义的变量在其他组件就可以使用了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Windows下Composer依赖控制器下载纯净版laravel
下一篇: 最长公共子序列(DP)