CODEWITHSUNDEEP
ruby-on-railswebpackvue.jsvuetify.jswebpacker
kieranwild
kieranwild

Reputation: 199

How to configure the webpacker to work with stylus so I can use Vuetify?

I have webpacker working for basic a vue.js/rails app but I would like to configure it so stylus files compile to css so I can use Vuetify. Does anyone know how to do this? My existing working stand alone vuetify/vue.js app has the following webpack config:

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

The syntax for webpacker seems to be a bit different for webpacker. My rails app has /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

But I am getting this error: Undefined variable: "$chip-label-color".in /rails_project_path/node_modules/vuetify/dist/vuetify.min.css (line 6, column 134917)

Does anyone have an example of how to configure Vuetify with Rails Webapcker?

Upvotes: 6

Views: 2265

Answers (1)

dorah
dorah

Reputation: 53

With webpacker 3 you can add loaders as explained in the loaders section of the docs.

Here is my configuration for stylus-loader in my webpack/environment.js

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

Also additional information can be found here on vuetify's website: setting up stylus loader with webpack and here

Also, I don't think environment.loaders.set works anymore. Use append.

Upvotes: 3

Related Questions