移动项目想尝试一下vux做UI库，本以为很简单，没想到搞了两天。
我要达到的目的其实很简单，就是可以调用sass 全局变量和mixin，结果按照官网文档和网上的文档都有报错，不报错了就找不到sass全局变量，各种方法都尝试了，主要集中在 less、less-loader、node-sass、sass-loader、vue-loader、和@vux/loader这几个依赖的版本问题上。
- vue.config.js 里的sass变量全局loader配置，这里注意sass-loader的版本对应的配置名称，如果报node-sass和sass-loader的相关错误，注意下是不是版本问题，太高了要降版本 。
module.exports = {
...
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: false,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {
//scss 全局变量引用
//sass-loader v8-，这个选项名是 "data"
//sass-loader v8 中，这个选项名是 "prependData"
//sass-loader v10+，这个选项名是 "additionalData"
sass: {
additionalData:
`@import "~compass-mixins/lib/compass/css3";
@import "~@/assets/scss/scss-components/globalVariable";
`
}
},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
...
}
2.接下来是vux-loader问题，按照官网安装vux-loader，上面的配置依然不能读取全局sass变量，按照网上说的降低vue-loader版本为14.2.2也不行，其实不用手动安装vue-loader，cli4会自动配置，只是手动安装@vux/loader即可。
cnpm i @vux/loader -D
3.vue.config.js配置vuxLoader
const vuxLoader = require('@vux/loader');
module.exports = {
configureWebpack: config => {
...
//vux loader 配置
vuxLoader.merge(config, {
plugins: [
{name: 'vux-ui'}
,{name: 'less-theme', path: './src/assets/styles/variable.less'}
,{name: 'duplicate-style'}
]
})
...
}
}
按照上面几个配置下来基本没问题了，我把完整的package.json发出来，如果还有报错的大家对照下每个依赖的版本。
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.4",
"babel-polyfill": "^6.26.0",
"core-js": "^3.6.4",
"vue": "^2.6.11",
"vue-router": "^3.1.6",
"vuex": "^3.1.3",
"vux": "^2.11.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.3.1",
"@vue/cli-plugin-eslint": "~4.3.1",
"@vue/cli-plugin-router": "~4.3.1",
"@vue/cli-plugin-vuex": "~4.3.1",
"@vue/cli-service": "~4.3.1",
"@vux/loader": "^2.1.0",
"babel-eslint": "^10.1.0",
"less": "^3.0.4",
"less-loader": "^4.1.0",
"node-sass": "^5.0.0",
"sass-loader": "^10.1.1",
"vue-template-compiler": "^2.6.11"
}
}
尤其是这几个依赖的版本，在网上搜索出来的一个超级天仙配组合，绝无冲突，node-sass@5.0.0和sass-loader@10.1.1。可以对照下面图片中的版本号来试试，希望能帮助大家脱坑。
image.png
============== 2022-02-25 新增
发现上面的配置有个问题，vuxLoader设置了less-theme后，并不能改变全局样式。在网上翻了一些帖子，最终解决方案如下
//package.json，修改下面几个依赖的版本
"dependencies": {
"vue": "^2.6.12"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.5.0",
"@vue/cli-plugin-eslint": "^3.5.0",
"@vue/cli-service": "^3.5.0,
"less": "^3.0.0",
"vue-template-compiler": "^2.6.12",
}
// babel.config.js
module.exports = {
presets: [
[
'@vue/app',
{
useBuiltIns: 'entry'
}
]
]
}
修改后重新运行 run serve，theme就生效了。
