分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

在vue-cli中安装scss,且可以全局引入scss的步骤

发布时间:2023-09-06 01:31责任编辑:沈小雨关键词:暂无标签

在写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/

在vue-cli中安装scss,且可以全局引入scss的步骤

原文地址:http://www.cnblogs.com/wuzhendong/p/8078659.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved