Ruby on rails 如何将webpacker配置为使用手写笔，以便我可以使用Vuetify？

我有一个webpacker用于基本的vue.js/rails应用程序，但我想对它进行配置，以便将手写笔文件编译为css，这样我就可以使用Vuetify了。有人知道怎么做吗？ 我现有的独立工作vuetify/vue.js应用程序具有以下网页包配置：

module: {
loaders: [
  {
    test: /\.vue$/,
    loader: 'vue'
  }, 
  {
      test: /\.s[a|c]ss$/,
      loader: 'style!css!sass'
  }
]
},
vue: {
  loaders: {
    scss: 'style!css!sass'
  }
}

webpacker的语法似乎与webpacker有点不同。我的rails应用程序具有/config/webpack/environment.js

const { environment } = require('@rails/webpacker')

environment.loaders.set('styl', {
test: /\.styl$/,
use: 'stylus-loader'
}),
environment.loaders.set('styl', {
test: /\.s[a|c]ss$/,
use: 'style!css!sass'
})
module.exports = environment

environment.loaders.append('stylus', {
  test: /\.styl$/,
  use: ['style-loader', 'css-loader', 'stylus-loader']
})

但我得到了这个错误： 未定义变量：“$chip label color”。在/rails\u project\u path/node\u modules/vuetify/dist/vuetify.min.css（第6行，第134917列）

---

有人举过如何使用Rails Webapcker配置Vuetify的例子吗？

使用webpacker 3，您可以添加加载程序，如文档部分所述

这是我在webpack/environment.js中对触控笔加载程序的配置

const { environment } = require('@rails/webpacker')

environment.loaders.set('styl', {
test: /\.styl$/,
use: 'stylus-loader'
}),
environment.loaders.set('styl', {
test: /\.s[a|c]ss$/,
use: 'style!css!sass'
})
module.exports = environment

environment.loaders.append('stylus', {
  test: /\.styl$/,
  use: ['style-loader', 'css-loader', 'stylus-loader']
})

此外，还可以在vuetify的网站上找到其他信息：和

---

此外，我认为environment.loaders.set不再有效。使用append。

我刚刚遇到了关于$chip标签颜色的相同错误。。。这也是唯一一次在Vuetify dist css中使用$foo语法。所以我认为这是他们生成dist文件的一个缺陷。现在，我刚刚用CSS颜色（即：粉色）替换了$chip标签颜色。只是想知道，是什么让你相信这与手写笔有关？报告并修复了错误。我在手写笔预处理后放置了

postss loader

进行postss处理。并使用

'vue-style-loader

代替样式加载器as。对于测试，我必须使用

\.styl（us）？$

来获得加载程序解析标记。所以：

{test://\.styl（美国）？$/，使用：['vue-style-loader'、'css-loader'、'postss-loader'、'stylus-loader']}