Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to solve global scss errors in vue-cli3.x configuration". In daily operation, I believe many people have doubts about how to solve global scss errors in vue-cli3.x configuration. The editor has consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to solve global scss errors in vue-cli3.x configuration". Next, please follow the editor to study!

Vue-cli3 configuration Global scss error

Use prependData instead of data when configuring vue.config.js

Sass: {/ / adjust according to the location of your own style file / the old version of scss-loader is data, the new version is prependData prependData: `@ import "@ / styles/global.scss";`}, vue-cli3 configures the global scss variable 1. Find the vue.config.js file

If not, you can create a new one in the root directory

two。 Write the following code module.exports = {css: {loaderOptions: {sass: {data: `@ import "@ / styles/_variable.scss";`} 3. Restart the project and use the

Note: if you write the above code, this error occurs after restarting the project:

Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.

Then it means that the sass-loader you installed should be V8, which can be checked in package.json to see if this is really the case. if it is indeed above v8, you need to configure a different way to write it, because the configuration item data has been abolished in V8 and changed to prependData. This description can be found on the official website of vue cli.

Therefore, we need to modify the configuration code to the following style:

Css: {loaderOptions: {sass: {prependData: `@ import "~ @ / styles/_variable.scss";`}} at this point, the study on "how to solve global scss errors in vue-cli3.x configuration" is over. I hope to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.