在vue-cli中安装scss,且可以全局引入scss的步骤
2024-10-01 02:29:50
在写vue的css样式时,觉得需要css预处理器让自己的css更加简洁、适应性更强、可读性更佳,更易于代码的维护,于是在vue-cli脚手架采用scss。写过的人都知道,每写一个.vue文件都要在style上面@import global.scss文件的话,这样很麻烦。css文件可以在main.js中可以直接import,而scss文件import会报错,因此记录下处理的方法。
步骤一: 安装node-sass、sass-loader、style-loader
cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev
cnpm install style-loader --save-dev
步骤二: 安装sass-resources-loader
cnpm install sass-resources-loader --save-dev
步骤三: 修改build中的utils.js
scss: generateLoaders('sass')
修改成:
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/global.scss')
}
}
)
可知,我是在assets中创建了一个global.scss文件。
最后,在组件中的style标签添加lang="scss",就OK了。
附上scss基础教程: https://www.sass.hk/guide/
最新文章
- linux学习日记之目录配制
- 高性能网站架构设计之缓存篇(3)- Redis 的配置
- SSAO相关资料
- mac 启动apache + php
- 你应该知道的JavaScript中NaN的秘密
- 关于怎样拆毁Cuttheprice
- 对C++ Primer的10.3.9单词转换的思考
- apache的一些基本配置
- SSL 通信原理及Tomcat SSL 双向配置
- 鄙人对constructor和prototype的总结
- python scapy的用法之ARP主机扫描和ARP欺骗
- rem自适应
- Django restframework之Token验证的缺陷及jwt的简单使用
- RedHat 7.3 Oracle 12.2.0.1 RAC 安装手册(转)
- word count程序,以及困扰人的宽字符与字符
- Locust 测试结果通过Matplotlib生成趋势图
- activiti自己定义流程之Spring整合activiti-modeler实例(一):环境搭建
- Android 黑色样式menu
- js操作history
- python arp欺骗