Home >Web Front-end >Vue.js >Example to solve the error that occurs when using lang='scss' in vue

Example to solve the error that occurs when using lang='scss' in vue

WBOY
WBOYforward
2022-08-10 11:43:274266browse

This article brings you relevant knowledge about vue, which mainly introduces the related issues about using lang="scss" to report errors. This is because the current version of sass-loader is too high. , an error occurred during webpack compilation. Let’s take a look at it. I hope it will be helpful to everyone.

Example to solve the error that occurs when using lang='scss' in vue

【Related recommendations: javascript video tutorial, vue.js tutorial

vue uses lang= "scss" error

When writing the VUE online editor, in order to make the style more beautiful, add lang="scss" to the style, and the following error will be displayed:

Example to solve the error that occurs when using lang=scss in vue

This is because the current version of sass-loader is too high, and an error occurred during webpack compilation, so we installed a lower version
Enter the following commands in the project in sequence:
npm install sass-loader@7.3.1 --save-dev
npm install node-sass --save
npm install style-loader --save
In this way, no error will be reported when using lang="scss"

Cannot use the command directly:

npm install sass-loader --save-dev

Otherwise, the following error will be reported:

Module build failed: TypeError: this.getResolve is not a function at Object.loader

Because of the current sass version If it is too high, an error occurred during webpack compilation, so specify: npm install sass-loader@7.3.1 --save-dev to install a lower version.

Next, add in build/webpack.base.config.js:

{
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      }

As shown:

Example to solve the error that occurs when using lang=scss in vue

[Related recommendations :javascript video tutorialvue.js tutorial

The above is the detailed content of Example to solve the error that occurs when using lang='scss' in vue. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete