Vuetify SassError：预期的换行符

Question

我尝试使用 webpack 添加 vuetify 但收到 SassError: Expected Newline

18:25:32 webpacker.1 |模块构建失败（来自 ./node_modules/sass-loader/dist/cjs.js）：

18:25:32 webpacker.1 | SassError：预期的换行符。

18:25:32 webpacker.1 | ╷

18:25:32 webpacker.1 | 1 │ var api = require("!../../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js");

Vuetify 插件：

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

已安装的软件包：

{
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "bootstrap": "^4.4.1",
    "css-loader": "^3.4.2",
    "deepmerge": "^4.2.2",
    "fibers": "^4.0.2",
    "howler": "^2.1.3",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.1",
    "pug": "^2.0.4",
    "pug-plain-loader": "^1.0.0",
    "sass": "^1.26.3",
    "sass-loader": "^8.0.2",
    "url-loader": "^3.0.0",
    "vue": "^2.6.11",
    "vue-loader": "^15.9.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11",
    "vuetify": "^2.2.18"
}

加载器详细信息：

module.exports = {
  test: /\.s(c|a)ss$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      // Requires sass-loader@^8.0.0
      options: {
        implementation: require('sass'),
        sassOptions: {
          fiber: require('fibers'),
          indentedSyntax: true // optional
        },
      },
    },
  ],
}

Answer 1

需要移除这些加载器：

environment.loaders.delete('sass')
environment.loaders.delete('moduleSass')
environment.loaders.delete('moduleCss')
environment.loaders.delete('css')

然后需要添加sass和scss加载器。

https://github.com/rails/webpacker/issues/2235