0
0 Comments

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 [email protected] 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"
  }
Anonymous Asked question May 13, 2021