电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

解決vue中使用less/sass及使用中遇到無效的問題

瀏覽:22日期:2022-11-13 09:34:31

一:使用方法

在vue官方腳手架中,即vue-lci搭建的項目中,可以輕易的使用less/sass。

先使用npm下載依賴,命令行為’npm install less less-loader ?save’,再在webpack.base.conf.js中添加rules對象:

{ test: /.less$/, loader: 'style-loader!css-loader!less-loader' }`

然后在style標簽中添加lang=”less”即可,或者直接引用less文件,或者import一個less文件(如同import一個css文件)。

<style lang='less'>//import ’./less/a.less’</style>

<link rel='stylesheet/less' type='text/css' href='http://www.hdgsjgj.cn/bcjs/文件路徑/styles.less' rel='external nofollow' >

sass可用相同的方法。

二:發現有的時候設置后無效

后面發現有的時候設置后無效,會報錯。主要是由于webpack版本問題,要注意版本信息。

less和less-loader仍然需要安裝。

通過檢查,我們可以看到webpack.base.conf.js已經引入了vue-loader.conf.js文件:

解決vue中使用less/sass及使用中遇到無效的問題

在這個文件中,我們可以看到它引入了utils.js文件:

解決vue中使用less/sass及使用中遇到無效的問題

在utils.js文件中,我們可以看到已經配置好解析less的文件了:

解決vue中使用less/sass及使用中遇到無效的問題

最后,直接webpack.base.conf.js里less解析使用vue-loader即可:

{ test: /.less$/, loader: ['vue-loader', 'css-loader', 'less-loader'] }, { test: /.less$/, loader: ’vue-loader’, options: vueLoaderConfig }

補充知識:vue中使用less出現的問題(style中使用less設置 scoped 遇到的坑)

最近在學vue的時候碰到的,在項目中的使用了 <style lang='less' scoped>,可以正常編譯卻不能啟動成功,具體報錯信息如下:

解決vue中使用less/sass及使用中遇到無效的問題

首先需要安裝必要的插件

sass-resources-loader,less-loader等,網上說這個出現這個錯誤的原因是因為less與webpack版本不一致所致。解決的方法如下。

1.修改項目根目錄build中的utils.js

在utils.js中

less: generateLoaders(’less’)改為less: generateLoaders(’less’).concat( { loader: ’sass-resources-loader’, options: { resources: path.resolve(__dirname, ’../src/assets/css/1.less’) } })

這個1.less文件各位同仁就自己在對應的目錄創建下就好了。

2.修改webpack.base.config.js

在該js中的modules中的rules中增加

{ test: /.less$/, loader: 'style-loader!css-loader!less-loader'}

3.將less-loader的版本降低

在package.js中找到less-loader,將版本號改為 ^5.0.0。

然后再執行npm install less-loader@5.0.0 --save

以上這篇解決vue中使用less/sass及使用中遇到無效的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 信阳网站建设专家-信阳时代网联-【信阳网站建设百度推广优质服务提供商】信阳网站建设|信阳网络公司|信阳网络营销推广 | 无负压供水设备,消防稳压供水设备-淄博创辉供水设备有限公司 | 冷却塔降噪隔音_冷却塔噪声治理_冷却塔噪音处理厂家-广东康明冷却塔降噪厂家 | 成都顶呱呱信息技术有限公司-贷款_个人贷款_银行贷款在线申请 - 成都贷款公司 | 合景一建-无尘车间设计施工_食品医药洁净车间工程装修总承包公司 | 精准猎取科技资讯,高效阅读科技新闻_科技猎 | 天长市晶耀仪表有限公司 | 二手电脑回收_二手打印机回收_二手复印机回_硒鼓墨盒回收-广州益美二手电脑回收公司 | 不锈钢轴流风机,不锈钢电机-许昌光维防爆电机有限公司(原许昌光维特种电机技术有限公司) | 模具ERP_模具管理系统_模具mes_模具进度管理_东莞市精纬软件有限公司 | 粘度计维修,在线粘度计,二手博勒飞粘度计维修|收购-天津市祥睿科技有限公司 | 闪电优家-卫生间防水补漏_酒店漏水渗水维修_防水堵漏公司 | 铸铝门厂家,别墅大门庭院大门,别墅铸铝门铜门[十大品牌厂家]军强门业 | 智慧物联网行业一站式解决方案提供商-北京东成基业 | 自清洗过滤器_全自动过滤器_全自动反冲洗过滤器_量子过滤器-滑漮滴 | 彼得逊采泥器-定深式采泥器-电动土壤采样器-土壤样品风干机-常州索奥仪器制造有限公司 | 江西高职单独招生-江西单招考试-江西高职单招网 | 捷码低代码平台 - 3D数字孪生_大数据可视化开发平台「免费体验」 | 亮点云建站-网站建设制作平台| 缠绕机|缠绕膜包装机|缠绕包装机-上海晏陵智能设备有限公司 | 集装箱标准养护室-集装箱移动式养护室-广州璟业试验仪器有限公司 | 成都租车_成都租车公司_成都租车网_众行宝 | 神超官网_焊接圆锯片_高速钢锯片_硬质合金锯片_浙江神超锯业制造有限公司 | 申江储气罐厂家,储气罐批发价格,储气罐规格-上海申江压力容器有限公司(厂) | 无纺布包装机|径向缠绕包装机|缠绕膜打包机-上海晏陵智能设备有限公司 | 新型锤式破碎机_新型圆锥式_新型颚式破碎机_反击式打沙机_锤式制砂机_青州建源机械 | 钢绞线万能材料试验机-全自动恒应力两用机-混凝土恒应力压力试验机-北京科达京威科技发展有限公司 | 专业生物有机肥造粒机,粉状有机肥生产线,槽式翻堆机厂家-郑州华之强重工科技有限公司 | 高柔性拖链电缆-聚氨酯卷筒电缆-柔性屏蔽电缆厂家-玖泰电缆 | 交联度测试仪-湿漏电流测试仪-双85恒温恒湿试验箱-常州市科迈实验仪器有限公司 | 水厂污泥地磅|污泥处理地磅厂家|地磅无人值守称重系统升级改造|地磅自动称重系统维修-河南成辉电子科技有限公司 | 软启动器-上海能曼电气有限公司 真空搅拌机-行星搅拌机-双行星动力混合机-广州市番禺区源创化工设备厂 | 汽液过滤网厂家_安平县银锐丝网有限公司 | 南京办公用品网-办公文具用品批发-打印机耗材采购 | 西安烟道厂家_排气道厂家_包立管厂家「陕西西安」推荐西安天宇烟道 | 自动售货机_无人售货机_专业的自动售货机运营商_免费投放售货机-广州富宏主官网 | 知企服务-企业综合服务(ZiKeys.com)-品优低价、种类齐全、过程管理透明、速度快捷高效、放心服务,知企专家! | 上海公司注册-代理记账-招投标审计-上海昆仑扇财税咨询有限公司 上海冠顶工业设备有限公司-隧道炉,烘箱,UV固化机,涂装设备,高温炉,工业机器人生产厂家 | 线粒体膜电位荧光探针-细胞膜-标记二抗-上海复申生物科技有限公司 | 齿轮减速电机一体机_蜗轮蜗杆减速马达-德国BOSERL齿轮减速机带电机生产厂家 | 集装箱箱号识别_自重载重图像识别_铁路车号自动识别_OCR图像识别 |