微客导航 » 文章资讯 » 在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作

在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作

2023-07-19 00:56:04 183

你可以在创建项目的时候选择预处理器(Sass/Less/Stylus)。如果当时没有选好，内置的webpack仍然会被预配置为可以完成所有的处理。你也可以手动安装相应的webpackloader：

#Sass
npminstall-Dsass-loadernode-sass

#Less
npminstall-Dless-loaderless

#Stylus
npminstall-Dstylus-loaderstylus

然后你就可以导入相应的文件类型，或在*.vue文件中这样来使用：


.personal
positionrelative
.banner-red
width100%
height100px

如果你想自动化导入文件(用于颜色、变量、mixin……)，你可以使用style-resources-loader

vueaddstyle-resources-loader

然后它会让你选择你使用的预处理器

安装完成后选择你使用的预处理器，他会在vue.config.js代码中生成

然后重新启动项目

npmrunserve

更详细的请阅读vue-cli3文档

补充知识：vue-cli3构建的项目中vue组件中引入stylus文件时报错解决办法

报错表现

解决办法：

引入文件时路径前增加~

例子：

@import'~common/stylus/mixin.styl';

vue.config.js配置文件中alias的配置

chainWebpack:config=>{
config.resolve.alias
.set('vue$','vue/dist/vue.esm.js')
.set('@',resolve('src'))
.set('@assets',resolve('src/assets'))
.set('components',resolve('src/components'))
.set('common',resolve('src/common'))
.set('base',resolve('src/base'))
.set('api',resolve('src/api')),
config.resolve.symlinks(true)
}

解释：为何需要增加·~·

~common代表相对于common目录，在webpack中配置了alias来简写common所指向的目录

以上这篇在vue-cli3.0中使用预处理器(Sass/Less/Stylus)配置全局变量操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作

热门推荐

随机推荐