我有一个vue项目，可以很好地使用vuetify 1.5
但是正如在vuetify LTS中宣布的那样，不再支持1.5版本，因此我决定将其升级到2.5。
升级到2.5后，当我构建我的项目时，它抛出SassError: Undefined variable错误。
这是我的代码:
// src/assets/scss/app.scss
$white: #fff;
// vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
sassOptions: {
prependData: "@import '@/assets/scss/app.scss';"
}
}
}
}
}
然后我调用$white变量在我的vue文件:
// User.vue
...
<style lang="scss" scoped>
div {
color: $white;
}
</style>
我正在使用sass-loader v10.2.0
// package.json
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-regular-svg-icons": "^5.15.1",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/vue-fontawesome": "^0.1.10",
"@mdi/font": "^5.8.55",
"@types/graphql": "^14.5.0",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link": "^1.2.14",
"apollo-link-context": "^1.0.20",
"apollo-link-error": "^1.1.13",
"apollo-link-http": "^1.5.17",
"apollo-link-schema": "^1.2.5",
"axios": "^0.21.1",
"casual-browserify": "^1.5.19-2",
"chart.js": "^2.9.4",
"concurrently": "^5.3.0",
"css-loader": "^3.6.0",
"dayjs": "^1.10.4",
"element-ui": "^2.14.1",
"graphql": "^15.5.0",
"graphql-tag": "^2.11.0",
"graphql-tools": "^7.0.1",
"material-design-icons-iconfont": "^6.1.0",
"module": "^1.2.5",
"pug": "^3.0.1",
"pug-loader": "^2.4.0",
"pug-plain-loader": "^1.1.0",
"qs": "^6.9.4",
"register-service-worker": "^1.7.2",
"sass-loader": "^10.2.0",
"style-loader": "^1.2.1",
"stylus": "^0.54.8",
"stylus-loader": "^3.0.2",
"terser": "^5.5.1",
"testcafe": "^1.14.2",
"typescript": "^3.9.9",
"vue": "^2.6.12",
"vue-apollo": "^3.0.4",
"vue-chartjs": "^3.5.1",
"vue-class-component": "^7.2.6",
"vue-csv-loader": "^0.1.5",
"vue-property-decorator": "^9.1.2",
"vue-router": "^3.5.1",
"vue-spinner": "^1.0.4",
"vue-template-compiler": "^2.6.12",
"vuejs-paginate": "^2.1.0",
"vuetify": "^2.5.8",
"vuetify-loader": "^1.7.2",
"vuex": "^3.6.2",
"vuex-class": "^0.3.2",
"vuex-type-helper": "^1.3.1"
},
"devDependencies": {
"@types/jest": "^26.0.15",
"@typescript-eslint/eslint-plugin": "^1.13.0",
"@typescript-eslint/parser": "^1.13.0",
"@vue/cli-plugin-babel": "^4.5.13",
"@vue/cli-plugin-eslint": "^4.5.13",
"@vue/cli-plugin-pwa": "^4.5.11",
"@vue/cli-plugin-typescript": "^3.12.1",
"@vue/cli-plugin-unit-jest": "^4.5.12",
"@vue/cli-service": "^3.12.1",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/test-utils": "^1.2.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"compression-webpack-plugin": "^2.0.0",
"core-js": "^3.10.2",
"eslint": "^5.16.0",
"eslint-config-prettier": "^6.15.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-promise": "^4.3.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-testcafe": "^0.2.1",
"eslint-plugin-vue": "^6.2.2",
"json-server": "^0.16.3",
"moment": "^2.29.1",
"prettier": "^2.3.0",
"prettier-eslint": "^12.0.0",
"prettier-eslint-cli": "^5.0.0",
"sass": "^1.37.5",
"ts-jest": "^26.4.4",
"typescript-eslint-parser": "^22.0.0",
"webpack-bundle-analyzer": "^3.9.0"
}
当构建项目时，它抛出这个错误:
error in ./src/views/adSet/manager.vue?vue&type=style&index=0&lang=scss&
[0]
[0] Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
[0] SassError: Undefined variable.
[0] ╷
[0] 90 │ color: $white;
[0] │ ^^^^^^
[0] ╵
[0] src/views/adSet/manager.vue 90:12 root stylesheet
[0]
@ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/User.vue?vue&type=style&index=0&lang=scss& 4:14-491 14:3-18:5 15:22-499
[0] @ ./src/views/User.vue?vue&type=style&index=0&lang=scss&
[0] @ ./src/views/User.vue
[0] @ ./src/router/index.ts
[0] @ ./src/main.ts
[0] @ multi (webpack)-dev-server/client?http://192.168.1.4:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts
[0]
我的代码出了什么问题?谢谢您的支持。
我发现vuetify 2.5不能与node-sass一起工作。在删除node-sass并安装sass之后，我将vue.config.js更改为以下内容，并且一切正常。
module.exports = {
css: {
loaderOptions: {
scss: {
additionalData: "@import '@/assets/scss/app.scss';"
}
}
}
}