在 Nuxt 中设置没有类散列的全局样式答案

【问题标题】：Set Global Styles Without Class Hashing in Nuxt在 Nuxt 中设置没有类散列的全局样式
【发布时间】：2021-07-15 16:18:10
【问题描述】：

我在一个 monorepo 中有许多 Vue SPA，它们都共享一组通用的全局样式，每个 SPA 和样式都是它们自己的 package.json 工作区。我正在尝试用 Nuxt 替换其中之一。

全局样式为.scss文件，它们导入Vue bootstrap并有一些自定义变量和类。

因此，我重新安装了 Nuxt 和 then ran：

yarn add -D sass sass-loader@10 fibers

我知道我可以像这样获得全局样式：

//in nuxt.config.js:

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

真的，我认为应该/将是它，我看到它确实被注入到页面中。但是，类名是散列的，因此不适用于我的组件。

而不是这个（假css来测试它是否进入页面）：

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

我明白了：

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

如何阻止全局样式像这样被散列，尤其是当我可能从其他 SPA/common 导入组件并且它们的类名没有在 HTML 中被散列时？只有注入的全局样式会像这样被散列。

我尝试了各种设置localIdentName 的尝试，例如：

//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'
          }
        ]
      })
    },

我也设置了：

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

又是nuxt.config.js。但是没有任何效果，而且我认为我必须对全局样式的工作方式有概念上的错误，因为我觉得我是在与框架作斗争而不是与它一起工作。

我的nuxt、webpack和sass-loader版本如下：

nuxt@2.15.4
webpack@4.46.0
sass-loader@10.1.1 (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"
  }

【问题讨论】：

标签： css vue.js nuxt.js

【解决方案1】：

原来我只需要this（关键是把它放在loaders内build）：

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

请注意，这仅在您正确安装依赖项并注意关于css-loader 和sass-loader 的构建警告时才有效。我尝试将sass-loader 降级，但直到我将其放回"10" 才奏效，这正是 Nuxt 所期望的（发出警告）。

【讨论】：