This is a small tread pit record, suggested collection. In case you need it one day.

To write an official website today, I created a NUXT project. I remember the NUXT project used to have CSS preprocessors, but not anymore.

Install dependencies

I’m using SCSS here, because dependencies can be cumbersome when sASS is installed.

Installation dependencies are as follows:

npm install sass sass-loader @nuxtjs/style-resources --save -dev
Copy the code

configuration

After the installation is complete, do the following configuration in nuxt.config.js

export default {
    modules: [
        // https://go.nuxtjs.dev/axios
        '@nuxtjs/axios',
      + '@nuxtjs/style-resources',
    ],

    + styleResources: {
    +     scss: [
    +       '@/assets/_var.scss'+] +},}Copy the code

Error 1:

The following error occurs when the project is started:

Rule can only have one resource source (provided resource and test + include + exclude)in
Copy the code

After searching on the Internet, I found that it may be because the version of Webpack is high.

I removed the current webPack version and installed the WebPack 4.x version

NPM uninstall webpack NPM install webpack@^4.0.0 --save-devCopy the code

Mistake 2:

Run the code again and find the following error:

# TypeError: this.getOptions is not a function
Copy the code

The sas-Loader version does not match.

Delete my Sass-Loader from V12 and reinstall the Sass-Loader from V10.

npm uninstall sass-loader

npm install sass-loader@10
Copy the code

The results of

expect

In fact, the downgrade was not the optimal solution, but the time of the project was limited, so I stopped looking for the optimal solution.

If there is a big guy, in the case of the new version, can solve, I hope you can share, I will go to one key three connect.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — gorgeous line — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

I heard “like” brings good luck.