[使用rails / webpacker在vue应用程序中使用vuetify自定义sass变量

Question

我正在使用带有Rails后端的Vue应用程序。我正在使用Vuetify，并且想自定义SCSS变量。遗憾的是，我无法使用Vue-CLI，因为我们将所有内容与webpacker（webpack的rails实现）捆绑在一起。因此，我尝试使用基本的webpack配置选项来实现它。

我无法直接执行此操作，因为webpacker具有自己的css / sass / scss加载程序配置。但是，我can挂接到现有的加载器，并在以后设置它们的函数中修改选项：

// config/webpack/environment.js

const updateStyleLoaders = (arr) => {
  arr.forEach((item) => {
    const loader = environment.loaders.get(item);

    // Use vue-style-loader instead of default to parse Vue SFCs
    const styleConfig = loader.use.find((el) => el.loader === 'style-loader');
    if (styleConfig !== undefined) {
      styleConfig.loader = 'vue-style-loader';
    }

    // VUETIFY: Use Dart-Sass and Fibers for Sass loaders
    const sassConfig = loader.use.find((el) => el.loader === 'sass-loader');
    if (sassConfig !== undefined) {
      const opts = sassConfig.options;

      opts.implementation = require('sass'); // Use dart-sass instead of node-sass
      opts.fiber = require('fibers'); // improves compilation speed
      opts.data = "@import '@/assets/sass/variables.scss';"; // Import custom variables
    }
  });
};

// Call fuction for all css-related loaders
updateStyleLoaders(['sass', 'css', 'moduleCss', 'moduleSass']);


// @/assets/sass/variables.scss

$body-font-family: "Comic Sans MS", "Comic Sans", cursive; // just wanna have fun
$border-radius-root: 20px;

现在是问题所在：

sass-loader规则匹配'sass'和'scss'。在vuetify's example中，sass和scss的匹配分别进行。当添加分号时，在编译过程中会出现此错误：

./node_modules/vuetify/src/components/VAlert/VAlert.sass
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

// Imports
                                     ^
      Semicolons aren't allowed in the indented syntax.
  ╷
1 │ @import '@/assets/sass/variables.scss';
  │                                       ^
  ╵
  stdin 1:39  root stylesheet

这告诉我，实际上该行已由sass-loader正确地添加到所添加的vuetify组件中。但是，当我删除分号时从import语句中支持sass的缩进语法，I看样式没有变化。

在这种情况下，我如何自定义我的vuetify组件？ Webpacker使用sass-loader v7.3.1。

我正在使用带有Rails后端的Vue应用程序。我正在使用Vuetify，并且想自定义SCSS变量。遗憾的是，我无法使用Vue-CLI，因为我们将所有内容与webpacker捆绑在一起，导轨...

Answer 1

大约2天前，我尝试将Storybook配置为在Vue / Vuetify项目中工作时遇到了一个非常相似的问题。非常沮丧。这是我现在工作的webpack.config.js文件的样子：