vue基础之定义stylus变量，修改webpack设置优化代码

最新推荐文章于 2024-04-20 08:32:22 发布

原创最新推荐文章于 2024-04-20 08:32:22 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

vue基础同时被 2 个专栏收录

9 篇文章

订阅专栏

Vue

8 篇文章

订阅专栏

博客介绍了两项前端开发技术。一是定义Stylus变量，新建varibles.styl文件定义背景颜色变量，用于网站改版时基础色调更换，维护性好；二是修改Webpack设置优化代码，在webpack.base.conf.js中添加别名，在main.js中直接使用，页面style引入前加~符号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义stylus变量

1.新建varibles.styl
2.定义一个背景颜色变量
$bgColor = #00bcd4
3.直接使用此变量
background-color: $bgColor
（主要用于网站改版时大量基础色调的更换，方便快捷维护性好）

修改webpack设置优化代码

使用背景：某路径一直使用，且代码冗长繁琐。
1.在webpack.base.conf.js中的reslove中的alias中添加类似于@的代码
‘@’: resolve(‘src’),
‘styles’: resolve(‘src/assets/styles’),
2.main.js中直接使用
import ‘styles/reset.css’
import ‘styles/border.css’
import ‘styles/iconfont.css’

3.注意在页面的style 引入前要加入~符号
@import ‘~styles/varibles.styl’