vux + vuecli4 + sass 全局变量

移动项目想尝试一下vux做UI库，本以为很简单，没想到搞了两天。
我要达到的目的其实很简单，就是可以调用sass 全局变量和mixin，结果按照官网文档和网上的文档都有报错，不报错了就找不到sass全局变量，各种方法都尝试了，主要集中在 less、less-loader、node-sass、sass-loader、vue-loader、和@vux/loader这几个依赖的版本问题上。

1. 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就生效了。