Configuring sass-resources-loader using Rails/Webpacker

[unikitty37]

I have tried multiple ways to include a variables.scss file in a Rails 5.2.1/VueJS/Webpacker project, with no joy. This is what I have for my webpack/loaders/sass-resources-loader.js:

environment.loaders.get('vue').use[0].options.loaders = {
  scss: [
    'vue-style-loader',
    'css-loader',
    'sass-loader',
    {
      loader: 'sass-resources-loader',
      options: {
        resources: [
          path.resolve(__dirname, 'app', 'javascript', 'variables.scss'),
        ],
      },
    },
  ],
}

but the Vue component that references a variable defined in variables.scss fails to compile with a message Undefined variable: "$header-background-colour".

I've tried various other means of specifying the path:

• variables.scss
• javascript/variables.scss
• app/javascript/variables.scss
• ../app/javascript/variables.scss
• ../../app/javascript/variables.scss
• ../../../app/javascript/variables.scss

All fail.

Currently I have to manually @import 'variables.scss'; into every component, which is not ideal. What is the correct way to specifying the path <rails root>/app/javascript/variables.scss? I'd be happy to add a PR to the docs to give an example of configuring for Rails once I've worked it out :)

[justin808]

@unikitty37 I'm not using Vue nor standalone webpacker. If you were on https://github.com/shakacode/react_on_rails, I could help you better.

Have you tried inserting some debugging print statements to figure out the issue?

[trafium]

@unikitty37 Which versions of webpacker and vue-loader do you use? I might be able to help you.

[zmanning29]

Having this same issue using create-react-app.

[justin808]

@zmanning29 can you try the previous release to see if the issue is with the current release?

[dkniffin]

I'm working on a migration from sprockets to webpacker, and I came across this GH issue when googling, so I figured I'd share the config I've got that seems to be working:

// config/webpack/environment.js

// ...

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

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

const sassResourceLoader = require('./loaders/sass-resource-loader')
environment.loaders.prepend('sass', sassResourceLoader)

// sass-resources-loader
sassLoader.use.push({
  loader: 'sass-resources-loader',
  options: {
    resources: [
      './app/javascript/styles/abstract/*.scss' // I've got all my "global" stuff in this one abstracts folder
    ]
  }
})

//...

At the moment, I think this is loading my variables and mixins and such correctly, though my compilation is still not working, but I think it's for unrelated reasons.

Edit: The previous version was not working 😅 I think this one is, but if it isn't, I'll try to come back and update it.

Edit 2: Confirmed, that config is correct. Also, fwiw in case anyone else runs across this in a google search, I also needed this in order to get file globbing working:

const globCssImporter = require('node-sass-glob-importer')
options.sassOptions.importer = globCssImporter()

[zmanning29]

figured this out. I think my issue may be a little unique because I am using Adobe Experience Manager. Here was the solution though:

const { override, adjustStyleLoaders } = require("customize-cra"); module.exports = override( adjustStyleLoaders(rule => { if (rule.test.toString().includes("scss")) { rule.use.push({ loader: require.resolve("sass-resources-loader"), options: { resources: "./src/styles/_base.scss" } }); } }) );

I wasn't using adjustStyleLoaders prior to this.