如何配置 webpacker 以使用手写笔，以便我可以使用 Vuetify？

Question

我有 webpacker 为基本的 vue.js/rails 应用程序工作，但我想对其进行配置，以便触控笔文件编译为 css，以便我可以使用 Vuetify。有谁知道如何做到这一点？我现有的独立工作 vuetify/vue.js 应用程序具有以下 webpack 配置：

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

但我收到此错误： 未定义变量：“$chip-label-color”.in /rails_project_path/node_modules/vuetify/dist/vuetify.min.css（第 6 行，第 134917 列）

有没有人有如何使用 Rails Webapcker 配置 Vuetify 的例子？

Answer 1

使用 webpacker 3，您可以添加加载器，如文档加载器部分中所述。

这是我在 webpack/environment.js 中对 stylus-loader 的配置

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

此外，还可以在 vuetify 网站上找到其他信息：setting up stylus loader with webpack和此处

另外，我认为environment.loaders.set不再有效。使用追加。