vuecli3 版本vant主题样式无法修改问题以及设置less全局
作者:互联网
问题记录,vant根据官方文档修改样式文件的时候无论如何处理都无法引入,
解决方案是吧代码块
'hack': `true; @import "${path.join(__dirname, './src/assets/style/less.less')}";
复制到Demo中然后运行Demo文件,运行然后成功。。。不知道为什么反正找不到原因,
然后把代码复制到自己代码上就成功了。。。。也不知道为什么,还是找不到原因。。。
根据官方提示已经吧文件路径修改为绝对路径了path.join(__dirname, ‘./src/assets/style/less.less’) 但是发现还是不行,反正就复制来复制去就好了。。找不到原因和原理。。。
less设置全局,所有代码都在 vue.config.js里面,参考文档,需要注意路径 这个楼主写错地址了。。
chainWebpack: config => {
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/style/style.less'), // 需要全局导入的less
],
})
}
vue.config.js完整代码
const path = require('path')
const webpack = require('webpack')
function resolve(dir) {
return path.join(__dirname, dir)
}
// vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/wechat' : '/',
outputDir: process.env.outputDir,
configureWebpack: {
externals: {
'AMap': 'AMap'
},
plugins: [
// Ignore all locale files of moment.js
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
]
},
chainWebpack: (config) => {
config.resolve.alias
.set('@$', resolve('src'))
.set('@api', resolve('src/api'))
.set('@assets', resolve('src/assets'))
.set('@comp', resolve('src/components'))
.set('@views', resolve('src/views'))
.set('@layout', resolve('src/layout'))
.set('@static', resolve('src/static'))
},
chainWebpack: config => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
},
css: {
loaderOptions: {
less: {
modifyVars: {
// less 文件覆盖(文件路径为绝对路径)
'hack': `true; @import "${resolve('./src/assets/style/less.less')}";`
// 'hack': `true; @import "${path.join(__dirname, './src/assets/style/less.less')}";`
},
javascriptEnabled: true
}
}
},
devServer: {
// development server port 8000
port: 8899,
open: true,
// proxy: {
// '/api': {
// // target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
// target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
// ws: false,
// changeOrigin: true
// }
// }
},
lintOnSave: undefined,
// babel-loader no-ignore node_modules/*
transpileDependencies: []
}
function addStyleResource(rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, './src/assets/style/style.less'), // 需要全局导入的less
],
})
}
标签:src,style,resolve,vant,vuecli3,less,path,config 来源: https://blog.csdn.net/qq2037074969/article/details/102757580