CODEWITHSUNDEEP
sassvue-cli-3sass-loader
SA-
SA-

Reputation: 151

Fix sass-loader error with vue.config.js in Vue.js

I am trying to use an external sass file (About.sass) in my Vue.js application generated from Vue CLI 3. However I am receiving an error about 'Unknown word' when it compiles.

After a lot of research, my application uses 'webpack-chain' and I use 'vue.config.js' to configure sass-loader.

My configuration timeline:

  1. Vue CLI 3 - default preset
  2. added <style src="../sass/About.sass" scoped></style>
  3. yarn add sass-loader node-sass style-loader
  4. added loader to vue.config.js

vue.config.js

module.exports = {
    chainWebpack: config => {
      config.module
        .rule('sass')
        .test(/\.sass$/)
        .use('sass-loader')
          .loader('sass-loader')
          .loader('css-loader')
          .loader('style-loader')
        .end()
    }
}

I am really blocked and unable to get this to work. I get this error:

 ERROR  Failed to compile with 1 errors                                                                        22:02:03

 error  in ./src/sass/About.sass?vue&type=style&index=0&id=c226fde6&scoped=true&lang=css&

Syntax Error: SyntaxError

(2:1) Unknown word

  1 |
> 2 | var content = require("!!../../node_modules/vue-style-loader/index.js??ref--9-oneOf-1-0!../../node_modules/css-loader/index.js??ref--9-oneOf-1-1!../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-3!./About.sass?vue&type=style&index=0&id=c226fde6&scoped=true&lang=css&");
    | ^
  3 |
  4 | if(typeof content === 'string') content = [[module.id, content, '']];

Any help or advice? Thanks in advance.

Upvotes: 1

Views: 3790

Answers (1)

SA-
SA-

Reputation: 151

It seems I forgot to specify the type lang="sass" in the tag <style src="../sass/About.sass" scoped></style>

Vue was smart enough to configure loaders, and so 'vue.config.js' was not even needed.

Upvotes: 1

Related Questions