木灵鱼儿
阅读:3338
vue cli4 创建全局scss变量
之前我的用法就是,哪个组件需要引入这个变量就import引入,现在感觉有点麻烦,就想能不能做一个全局的,所有组件都可以直接引入这个scss文件中的内容。
首先我们需要安装一个插件:style-resources-loader
vue add style-resources-loader
回车后会有提示四个选项,我们scss就选择scss然后回车。
安装完毕后在项目根目录创建一个vue的配置文件,有就不用创建,直接用。
创建vue.config.js
文件,将下面的代码丢进去,自己改下路径地址:
const path = require("path");
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: [
//加上自己的文件路径,不能使用别名
path.resolve(__dirname, 'src/assets/scss/_global.scss'),
]
}
}
}
src/assets/scss/_global.scss
这段地址就自行修改了,src目录往下开始,设置好后保存。
建议重启服务。
然后这个文件内的变量,所有组件都可以直接引用。
使用vuetify框架安装失败
可以换一种安装方式,推荐yarn
要装两个插件:
yarn add style-resources-loader
yarn add vue-cli-plugin-style-resources-loader
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
scss 自动生成margin和padding的class
费了半天劲才搞懂了,scss的函数代码写的是真累啊,而且不知道为啥我的代码格式化会给我自动换一行,导致极度不美观。//生成margin和padding $multiplier:4; //乘数 $dimensions:("p":"padding", "m":"margin"); //方向 $directions:("t":"top", "b":"bottom", "l":"left", &qu...
vue cli4 全局scss变量技巧
今天啃了下官方文档,加上之前也配置到webpack的,有一些经验,我觉得官方可能有对应的方式,毕竟在webpack中我们只需要在sass-loader配置中就可以加入全局scss了,都不用安装啥插件。于是乎,果然,官方有,但是文档很蛋疼,你能看懂引入单个全局,没有多个全局的示例,索性自己写个笔记了。vue.config.jsmodule.exports = { css: { loaderOptions: { scss: { prependData: ` @import "~@/base/assets/scss/glob...
vue cli4引入vant并配置自动rem换算 postcss-pxtorem和lib-flexibl + 黑名单
在引入vant的时候,我看到官方推荐了两个自动转换px为rem的插件,一个叫postcss-pxtorem,一个叫lib-flexible。他们的用法如下:安装插件:安装postcss-pxtorem npm install postcss-pxtorem --save-dev安装lib-flexible由于时间的问题,lib-flexible其实已经弃用了,现在是使用名为amfe-flexible的插件,amfe-flexible实际上就是在lib-flexible的基础上更新的,所以用法都是一样。npm i -s amfe-flexible安装完毕只需要引入amfe-flexib...