Open unikitty37 opened 5 years ago
@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?
@unikitty37 Which versions of webpacker and vue-loader do you use? I might be able to help you.
Having this same issue using create-react-app.
@zmanning29 can you try the previous release to see if the issue is with the current release?
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()
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.
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 mywebpack/loaders/sass-resources-loader.js
:but the Vue component that references a variable defined in
variables.scss
fails to compile with a messageUndefined 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 :)