CODEWITHSUNDEEP
vue.jswebpacksass-loader
Ivan Bogolyubskiy
Ivan Bogolyubskiy

Reputation: 86

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

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

Upvotes: 1

Views: 2555

Answers (2)

Ivan Bogolyubskiy
Ivan Bogolyubskiy

Reputation: 86

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()
    })
  }
}

Upvotes: 1

jenseo
jenseo

Reputation: 62

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";
        `
      }
    }
  }
};

Upvotes: 0

Related Questions