It is configured according to the online tutorial, but it still reports errors. The error information is as follows:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
width: $sideBarWidth !important;
^
Undefined variable: "$sideBarWidth".
Baidu has a problem with the version of SASS loader
// in sass version 9, additionaldata is used, in sass version 8, prependdata is used, and in other versions, data
my version is 7.1.0, so finally changing the key name to data solves the problem
in vue.config.js, the configuration is as follows:
module.exports = {
...
css: {
// extract: true // Whether to use the css separation plugin ExtractTextPlugin (open skeleton screen must be this configuration)
// css presetter configuration item
// use additionalData in sass version 9 use prependData in version 8, other versions, use data
// semicolon here; required
loaderOptions: {
sass: {
data: '@import "./src/styles/variables.scss";'
}
},
},
...
},
Note: semicolon after the configuration file path; Media query expression must begin with ‘(‘
Read More:
- Vue installs sass loader directly, and node sass reports an error
- [Solved] Node sass version 7.0.0 is incompatible with ^ 4.0.0 | ^ 5.0.0 | ^ 6.0.0
- NPM run dev runs the Vue project and reports an error: Node Sass does not yet support your current environment
- [Solved] Error: Transform failed with 1 error: error: Invalid option in transform() call: “jsx“
- [Solved] VUE npm install Error: Module build failed: Error: ENOENT: no such file or directory, scandir
- [Solved] Vue Error: Module build failed Error Node Sass version 6.0.1 is incompatible with ^4.0.0.
- Vue Use scss Error: this.getOptions is not a function [How to Solve]
- [Solved] scss Error: TypeError: this.getOptions is not a function
- [Solved] Syntax Error: Error: Node Sass does not yet support your current environment: Windows 64-bit with
- Vue Project Error: Expected indentation of 2 spaces but found 4,Newline required at end of file but not found
- [Solved] Syntax Error: TypeError: this.getOptions is not a function
- [Solved] Vue Project Error: Syntax Error: TypeError: this.getOptions is not a function
- [Solved] This.getoptions is not a function when installing sass loader and less loader
- [Solved] Syntax Error: Error: Node Sass does not yet support your current environment: OS X Unsupported archi
- [Solved] Vue Project Error: Module build failed: Error: Missing binding
- [Solved] Vue 3 Script Setup ESLint Error: ‘defineProps‘ is not defined
- [Solved] SyntaxError: Cannot use import statement outside a module
- [Solved] Syntax Error: Error: Node Sass does not yet support your current environment:
- npm ERR code ELIFECYCLE [How to Solve]
- [Solved] Syntax Error: Error: No ESLint configuration found & TypeError: eslint.CLIEngine is not a constructor