我为一家试图将项目从Vue CLI 4迁移到Vue CLI 5的组织工作。该项目使用Vuetify，我们有在styles/variables.scss文件中使用的SCSS文件(Vuetify需要自定义样式(，也通过@import在Vue组件文件中使用(SCSS变量有时需要在<script>部分中(
这里有一些示例显示了如何通过应用程序使用SCSS变量：
// styles/variables.scss
@import "colors.scss";
$some-vuetify-sass-variable: $color // from (colors.scss)
// plugins/vuetify.js
import { primaryColor } from "@/style/colors.scss";
Vue.use(Vuetify);
const options = {
theme: {
dark: false,
themes: {
light: {
primary: primaryColor,
// ...
},
},
},
};
export default new Vuetify(options);
// Component.vue
<template>
<v-chip
:color="clearPrimaryColor"
text-color="primary"
/>
</template>
<script>
import { clearPrimaryColor } from "@/style/colors.scss";
export default {
name: "Component",
created() {
this.clearPrimaryColor = clearPrimaryColor;
}
}
</script>
<style lang="scss">
.some-class {
background-color: $clearPrimaryColor
}
</style>
在Vue CLI迁移过程中，我们还尝试升级一些Vuetify依赖项(sass和vuetify-loader(。将sass从8版本升级到10版本会触发编译sass错误。
通过此复制分支：https://github.com/KevinFabre/vue-cli-5-vuetify-scss-variables-in-js(sass 8.0.0(，该项目确实进行了编译。对于这个：https://github.com/KevinFabre/vue-cli-5-vuetify-scss-variables-in-js/tree/error/sass-error(sass10.0.0(，它不编译：
ERROR Failed to compile with 2 errors
error in ./src/styles/app.module.scss
Syntax Error: SassError: This file is already being loaded.
╷
2 │ @import "app.module.scss";
│ ^^^^^^^^^^^^^^^^^
╵
src/styles/variables.scss 2:9 @import
src/styles/app.module.scss 1:9 root stylesheet
在使用Vuetify sass覆盖时，是否有额外的Vue CLI 5配置允许在JS中导入CSS
我们已经向vuetify加载器和Vue CLI提交了问题，但目前没有收到任何回复：
- https://github.com/vuetifyjs/vuetify-loader/issues/234
- https://github.com/vuejs/vue-cli/issues/7083
{
"devDependencies": {
"@babel/preset-env": "^7.11.0",
"@cypress/webpack-preprocessor": "^5.4.1",
"@mdi/font": "^6.5.95",
"@vue/cli-plugin-babel": "^4.4.5",
"@vue/cli-plugin-e2e-cypress": "^4.4.5",
"@vue/cli-plugin-eslint": "^4.4.5",
"@vue/cli-service": "^4.4.5",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.0.1",
"core-js": "^3.6.5",
"eslint": "^7.3.1",
"eslint-plugin-mocha": "^9.0.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-unused-imports": "^1.1.5",
"eslint-plugin-vue": "^7.0.0",
"eslint-plugin-vuetify": "^1.1.0",
"lint-staged": "^10.2.11",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"style-resources-loader": "^1.2.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-cli-plugin-style-resources-loader": "^0.1.3",
"vue-cli-plugin-vuetify": "^2.0.6",
"vue-svg-loader": "^0.16.0",
"vue-template-compiler": "^2.6.12",
"vuetify-loader": "^1.7.3",
}
}
谢谢你抽出时间。
组件必须避免导入已在全局变量样式表(src/styles/variables.scss(中导入的文件。app.module.scss(在src/styles/variables.scss和src/components/HelloWorld.vue中加载(就是这种情况，导致关于文件被加载两次的错误。
一种解决方案是将颜色定义从app.module.scss移动到其自己的文件中，并将其导入variables.scss而不是app.module.scss中。然后，组件可以导入app.mdoule.scss，而不会遇到原始问题。
/* src/styles/app.module.scss *
:export {
whitecolor: $white-color;
darkcolor: $dark-color;
lightcolor: $light-color;
mediumcolor: $medium-color;
alertcolor: $alert-color;
lightblackcolor: $light-black-color;
blackcolor: $black-color;
}
/* src/styles/colors.scss */
$white-color: #fcf5ed;
$dark-color: #402f2b;
$light-color: #e6d5c3;
$medium-color: #977978;
$alert-color: #cb492a;
$light-black-color: #706e72;
$black-color: #414042;
/* src/styles/variables.scss */
@import "~vuetify/src/styles/settings/_colors.scss";
@import "colors.scss";
$material-light: (
background: map-get($grey, "lighten-1")
);
演示
这基本上与vuejs应用程序中声明的导入文件的重复解析有关。
有两种方法可以解决：
- 在出现Sass导入错误时，请使用@Use而不是@import。类似地，
@import "app.module.scss";变为@use "app.module.scss"; - 另一种选择是将sass加载程序库降级为"^8.0.2〃
请告诉我上述解决方案是否适用于您，同时，如果我找到任何新的解决方案，我将更新我的答案。