Vue CLI 3 sass-resources-loader - Options.loaders undefined

Question

I was able to successfully configure a new Vue project using the 3.0 version of the CLI to use sass-resource-loader a few weeks ago using the information posted here: Using sass-resources-loader with vue-cli v3.x

However, after updating everything today I'm encountering the following error when running npm run serve:

TypeError: Cannot read property 'scss' of undefined

the only options that seem to be getting passed into .tap(options) are:

{ compilerOptions: { preserveWhitespace: false } }

I don't currently know enough about chainWebpack to effectively debug, but I'm working on it. If anyone has any insights into what's changed to cause this error, it'd be greatly appreciated.

my vue.config.js:

const path = require('path') module.exports = { chainWebpack: (config) => { config .module .rule('vue') .use('vue-loader') .tap((options) => { console.log(options) options.loaders.scss = options.loaders.scss.concat({ loader: 'sass-resources-loader', options: { resources: [ path.resolve('./src/scss/_variables.scss'), path.resolve('./src/scss/_mixins.scss') ] }, }) return options }) config .module .rule('scss') .use('sass-resources-loader') .loader('sass-resources-loader') .options({ resources: [ path.resolve('./src/scss/_variables.scss'), path.resolve('./src/scss/_mixins.scss') ] }) } }

Instead of tapping into webpack chain can you just use the css loader option specified in the Vue CLI docs at the bottom of this page github.com/vuejs/vue-cli/blob/dev/docs/css.md — Luke Chinworth
– Luke Chinworth, Commented May 28, 2018 at 18:24

Ruslan · Accepted Answer · 2018-06-04 22:59:33Z

8

+50

You use [email protected], this probably means that your project uses [email protected] Since version 15, the vue-loader does not need additional configs for loaders. You can configure only your main webpack loaders.

const path = require('path') module.exports = { chainWebpack: (config) => { config .module .rule('scss') .use('sass-resources-loader') .loader('sass-resources-loader') .options({ resources: [ path.resolve('./src/scss/_variables.scss'), path.resolve('./src/scss/_mixins.scss') ] }) } }

You can also inspect webpack configs using the vue inspect or ./node_modules/.bin/vue-cli-service inspect commands.

edited Jun 4, 2018 at 22:59

answered Jun 2, 2018 at 0:03

Ruslan

7626 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Constantin Chirila Over a year ago

I tried your solution but I get this:

Module build failed (from ./node_modules/sass-loader/lib/loader.js): undefined ^ Undefined variable: "$brand-color". in C:\dev\git\vue-typescript-test\src\components\HelloWorld.vue (line 60, column 10)

This is on a fresh VueCli project

Victor Over a year ago

Have the same issue as @ConstantinChirila

Constantin Chirila Over a year ago

@Victor i managed to do it without the sass-resource-loader. In your vue.config.js add this: module.exports = { css: { loaderOptions: { sass: { data: @import "@/scss/_config.scss"; } } } } You can check more in here: cli.vuejs.org/guide/css.html#pre-processors

Dr Fred Over a year ago

Updating last @ConstantinChirila comment : You should now use "prependData" instead of "data" which is deprecated now (sass-loader v8)

Matthew Kirkley Over a year ago

This solution will reimport _config.scss in every lang="scss" style you define. (your resulting bundle will have multiple duplicated style tags). not an optimal solution

Collectives™ on Stack Overflow

Vue CLI 3 sass-resources-loader - Options.loaders undefined

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related