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:
- Vue CLI 3 - default preset
- added
<style src="../sass/About.sass" scoped></style> - yarn add sass-loader node-sass style-loader
- 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.
