2***@qq.com
2***@qq.com
  • 发布:2021-06-15 18:34
  • 更新:2023-08-10 10:33
  • 阅读:1592

uni.app 通过vue.config.js 实现.less文件的全局引入

分类:uni-app

并不是自己想要用less,我项目里面用的是scss,之前偶尔听朋友讲起,然后自己也百度了很多,也看了些帖子,基本都挨个儿试过了,都不行,后来终于知道vue.config.js这个怎么配置了。希望对在找这个的有点帮助。

let path = require('path');    
let vars = path.resolve(__dirname, '你的.less文件的路径')   
module.exports = {    
    css: {    
        loaderOptions: {  
            less: {      
                javascriptEnabled: true,      
                modifyVars: {      
                    'hack': `true; @import "${vars}";`      
                }      
            }      
        }   
    }    
}
2 关注 分享
7***@qq.com 喜欢技术的前端

要回复文章请先登录注册

7***@qq.com

7***@qq.com

可行,感谢分享
2023-08-10 10:33
2***@qq.com

2***@qq.com (作者)

回复 这个这么重要吗 :
好的,虽然已经忘了哪个项目上要这么搞了,但是当时那样弄好像是可以的,不过还是感谢分享
2021-12-27 14:01
这个这么重要吗

这个这么重要吗

这种方式不行,
使用style-resources-loader
npm install style-resources-loader -D
vue.config.js:
```
module.exports = {
configureWebpack: {
plugins,
},
chainWebpack: config => {
config.resolve.alias.set('@', path.resolve(__dirname, './src'))
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
},
}

function addStyleResource(rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, './src/assets/less/global.less'),
],
})
}
```
2021-10-29 18:12