vue less & sass

gengyan_99

已于 2022-08-05 14:03:41 修改

阅读量251

点赞数 1

分类专栏： vue 文章标签： vue.js less javascript

于 2022-03-09 23:10:15 首次发布

本文链接：https://blog.youkuaiyun.com/gengyan_99/article/details/123390052

版权

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在项目中遇到的less和sass加载问题及其解决方案。首先，针对less版本过高导致的问题，推荐使用'less': '^3.8.1'和'less-loader': '^5.0.0'。然后，安装'style-resources-loader'来注入全局样式。在vue.config.js中配置style-resources-loader，加载全局变量文件。如果遇到找不到或无效定义，可以尝试重新安装vue-cli-plugin-style-resources-loader。对于sass，可能也需要解决高版本不兼容问题，建议卸载并安装'sass-loader@7.3.1'和'node-sass@4.12.0'。

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

1: npm install less@3.9.0 less-loader@4.1.0 --save-dev //版本太高可能导致无法使用，测试可用版本有"less": "^3.8.1",
"less-loader": "^5.0.0",

2:npm i style-resources-loader --save-dev

3.在vue.config.js中配置，const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
pluginOptions: { // 第三方插件配置
'style-resources-loader': {
preProcessor: 'less',
patterns: [path.resolve(__dirname, './src/assets/styles/vars.less')]
}
}
}

4:<style lang="less" scoped>

5说找不到或者不存在，或者定义无效，那么再去安装一下

npm i vue-cli-plugin-style-resources-loader --save-dev

-------------------------------------------------------------------------

sass 安装

npm install -D node-sass sass-loader

同样sass也可能面临版本太高的问题，这时可以

npm uninstall --save sass-loader

npm install sass-loader@7.3.1 --save-dev

npm i -D node-sass@4.12.0