I can't load configuration scss file in vuejs using sass-resources-loader

Question

webpack.base.conf.js

module: {
rules: [
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        scss: 'vue-style-loader!css-loader!sass-loader',
        sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
      }
    }
  },
  {
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/assets/scss/_variables.scss')
    }
  },

My "variables" file starts to load, but then i get this error:

Module parse failed: Unexpected character '#' (1:8)
You may need an appropriate loader to handle this file type.
| $white: #ffffff;
| 
| // The Vue build version to load with the `import` command

I use this manual:

https://vue-loader-v14.vuejs.org/en/configurations/pre-processors.html

vue version: 2.93

Ivan Bogolyubskiy · Accepted Answer · 2018-10-15 22:58:44Z

1

Eventually i created project from scratch using vue-cli@3 and added to vue.config.js this code:

const path = require('path');

module.exports = {
  chainWebpack: config => {
    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach(item => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          resources: [
            path.resolve(__dirname, './src/assets/scss/_variables.scss'),
            path.resolve(__dirname, './src/assets/scss/_mixins.scss'),
          ]
        })
        .end()
    })
  }
}

answered Oct 15, 2018 at 22:58

Ivan Bogolyubskiy

862 silver badges11 bronze badges

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

Comments

jenseo · Accepted Answer · 2018-10-15 07:48:50Z

0

You might want to add it to a vue.config.js file in your root directory. If the file doesn't exist, create it and add something along the lines of this (my config):

module.exports = {
css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/assets/_variables.scss";
        `
      }
    }
  }
};

answered Oct 15, 2018 at 7:48

jenseo

627 bronze badges

4 Comments

Ivan Bogolyubskiy Over a year ago

Thanks, but it is not working for me. Should i make some changes in my webpack.base.conf.js ?

jenseo Over a year ago

Have you installed with vue cli? If you're using the config above, you won't need your code in webpack config. Make sure you have the following under devDependencies in package.json as well: "css-loader": "^1.0.0", "sass-loader": "^7.1.0",

Ivan Bogolyubskiy Over a year ago

Yes. I have these dependencies. It looks like webpack ignores my vue.config.js .

Dr Fred Over a year ago

You should now use "prependData" instead of "data" which is deprecated now (sass-loader v8)

Collectives™ on Stack Overflow

I can't load configuration scss file in vuejs using sass-resources-loader

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related