Set Global Styles Without Class Hashing in Nuxt

Question

I have numerous Vue SPAs in a monorepo that all share a common set of global styles, each SPA and the styles are their own package.json workspace. I'm trying to replace one of them with Nuxt.

The global styles are .scss files, they import Vue bootstrap and have some custom variables and classes.

As such, I did a fresh install of Nuxt and then ran:

yarn add -D sass sass-loader@10 fibers

I know I can get global styles like so:

//in nuxt.config.js:

css: [resolve(__dirname+'/../common/styles/index.scss')

Really I thought that should/would be it, and I see it does get injected into the page. However, the class names are hashed, so it doesn't apply to my components.

Instead of this (fake css to test if it goes in the page):

.test{
  text-align: test;
  top: test;
}

I get this:

.olAmdkaWN_JnK1npjbKiI {
  text-align: test;
  top: test;
}

How can I stop the global styles from being hashed like this, especially when I may be importing components from the other SPAs/common and their classnames aren't being hashed in the HTML? Only the injected global styles are getting hashed like this.

I've tried various attempts at setting the localIdentName such as:

//in nuxt.config.js
build: {
    extend(config) {
      config.module.rules.push({
        test: /\.scss$/,
        use: [{
            loader: 'css-loader',
            options: {
              modules: false
              /*
              or sometimes I'll try something like:
              modules:{
                localIdentName: '[local]'
              }
              */
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      })
    },

I've also set:

 cssModules: {
    localIdentName: '[local]'
  },

Again in the nuxt.config.js. But nothing works and furthermore I think I must have a conceptual error about how global styles are meant to work, as I feel like I'm fighting the framework rather than working with it.

My nuxt, webpack and sass-loader verisons are as follows:

[email protected]
[email protected]
[email protected] (It was at 7.1.x but the console suggested upgrading it - didn't make a difference in terms of solving this)

package.json:

"dependencies": {
    "core-js": "^3.9.1",
    "common": "1.0.0", (local dependency)
    "nuxt": "^2.15.3"
  },
  "devDependencies": {
    "fibers": "^5.0.0",
    "sass": "^1.32.11",
    "sass-loader": "10"
  }

scoop scoop · Accepted Answer · 2021-05-13T10:24:52

Turns out all I needed was this (the key was to put it in loaders within build):

//in nuxt.config.js
build: {
  loaders: {
    cssModules: {
      localIdentName: '[local]'
    },
  },
}

Please note this only works if you properly install your dependencies and heed build warnings in regards to css-loader and sass-loader. I tried downgrading sass-loader and this didn't work until I put it back at "10" which is what Nuxt expected (threw a warning).

Set Global Styles Without Class Hashing in Nuxt

1 Answers