webpacker: Webpacker SASS/SCSS loader conflicts with libs that use dart sass like vuetify

@davidfabreguette :

1. install the sass, the vuetify and the vuetify-loader packages.
2. you should have a config directory in the root of your project to configure webpacker which includes some files , like:

config/webpack
├── development.js
├── environment.js
├── production.js
└── test.js

Then, in environment.js , something like :

const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { config } = require('@rails/webpacker')

// We need to remove the webpacker preconfigured CSS loader as it conflicts with our own SASS config
environment.loaders.delete('css')

environment.loaders.append('i18n-yml', {
  test: /i18n\/\S+\.yml$/i,
  use: [
    'json-loader',
    'yaml-loader'
  ]
})

environment.loaders.append('vue', {
  test: /\.vue(\.erb)?$/,
  use: [{
    loader: 'vue-loader',
    options: {
      preLoaders: {
        i18n: 'yaml-loader'
      },
      loaders: {
        i18n: '@kazupon/vue-i18n-loader'
      }
    }
  }]
})

environment.loaders.append('sass', {
  test: /\.sass$/,
  use: [
    config.extract_css === false
      ? 'vue-style-loader'
      : MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        sourceMap: true,
        importLoaders: 2
      }
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true,
        implementation: require('sass'),
        fiber: require('fibers'),
        data: `@import "app/javascript/manager/styles/main.scss"`,
        indentedSyntax: true
      }
    }
  ]
})

environment.loaders.append('scss', {
  test: /\.scss$/,
  use: [
    config.extract_css === false
      ? 'vue-style-loader'
      : MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        sourceMap: true,
        importLoaders: 2
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        sourceMap: true
      }
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true,
        implementation: require('sass'),
        fiber: require('fibers'),
        data: `@import "app/javascript/manager/styles/main.scss";`
      }
    }
  ]
})

environment.plugins.append('MiniCssExtractPlugin', new MiniCssExtractPlugin({
  filename: 'css/[name]-[contenthash:8].css',
  chunkFilename: 'css/[name]-[contenthash:8].chunk.css'
}))
environment.plugins.append('VueLoaderPlugin', new VueLoaderPlugin())
environment.plugins.prepend('VuetifyLoaderPlugin', new VuetifyLoaderPlugin())

module.exports = environment

This should be enough to make Vuetify work ( a - la - carte setup ) . by the way “main.scss” should include only variable definitions and overrides for Vuetify. For other global styles use app.scss or some other wrapper component.

The solution described in this article worked for me to replace node-sass with dart-sass:

// Get the actual sass-loader config
const sassLoader = environment.loaders.get('sass')
const sassLoaderConfig = sassLoader.use.find(function(element) {
  return element.loader == 'sass-loader'
})

// Use Dart-implementation of Sass (default is node-sass)
const options = sassLoaderConfig.options
options.implementation = require('sass')

@jakeniemiec My issue was solved by deleting the loader for ‘css’. That’s all. I don’t understand why webpacker includes a plain css loader but for vue applications using vue-style-loader (new version 15+) a plain css loader conflicts with the sass loader.

Seems that I can remove them with

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

especially ‘css’ was causing the compilation issue.

I added the required dependencies from vuetify guide (https://vuetifyjs.com/en/customization/a-la-carte). yarn add sass sass-loader fibers deepmerge -D

setup vuetify-loader at environment.js using this:

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin') environment.plugins.prepend('VuetifyLoaderPlugin', new VuetifyLoaderPlugin())

environment.loaders.delete(‘sass’) environment.loaders.delete(‘moduleSass’) environment.loaders.delete(‘moduleCss’) environment.loaders.delete(‘css’)

environment.loaders.append(‘scss’, { test: /.scss$/, use: [ ‘vue-style-loader’, { loader: ‘css-loader’, options: { sourceMap: true } }, { loader: ‘sass-loader’, options: { sourceMap: true, // data: @import "app/javascript/src/styles/main.scss"; } } ] })

environment.loaders.append(‘sass’, { test: /.sass$/, use: [ ‘vue-style-loader’, { loader: ‘css-loader’, options: { sourceMap: true } }, { loader: ‘sass-loader’, options: { indentedSyntax: true } } ] })

i didn’t included stylesheet_pack_tag in my layout. but even when I add it run to the same problem.

Is it possible to drop webpacker completely with a rails app?