安装 vuetify.js 时出现 scss 文件错误

Posted 2023-02-22

【中文标题】安装 vuetify.js 时出现 scss 文件错误

【英文标题】：Getting error in scss file when installing vuetify.js

【发布时间】：2020-01-25 15:48:34

【问题描述】：

我已经安装了 vuetify.js，但它在 webpack 配置中给了我错误。

我改变了我的 webpack v4 配置，也安装了 node-sass 和 sass-loader

Webpack.config.js

    test:  /\.(s*)css$/,
    loader:['style-loader', 'css-loader', 'sass-loader']

这是错误

./node_modules/vuetify/src/styles/main.sass 3:0 中的错误 模块解析失败：意外字符“@”（3:0） 您可能需要适当的加载程序来处理此文件类型。 | // 仿照 ITCSS https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/ |

@import './settings/_index' | @import './tools/_index' | @import './generic/_index' @ ./node_modules/vuetify/lib/framework.js 5:0-33 @ ./node_modules/vuetify/lib/index.js @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/header/Header.vue @ ./src/header/Header.vue @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/app/App.vue @ ./src/app/App.vue @ ./src/index.js

【问题讨论】：

你是如何设置你的项目的？你是否使用了默认的 vue webpack 设置？

@SimonThiel 不，我没有使用默认的 vue webpack 设置，虽然我在 webpack 中进行了外部配置，但这些配置适用于 css 但不适用于 scss

安装以下依赖项是否有效？

@SimonThiel 不，我安装了它们，但这对我不起作用

【参考方案1】：

我使用以下安装了以下依赖项，它对我来说很好：

    "sass": "^1.22.9",
    "sass-loader": "^7.2.0",
    "vue-cli-plugin-vuetify": "^0.5.0",
    "vuetify-loader": "^1.3.0"