如何阻止Webpack调用require()时自动将编译后的CSS插入DOM

核心原因 #

你遇到的自动插入style标签的问题，本质是Nuxt默认配置的SCSS处理规则和你自定义的.extract.scss匹配规则同时命中了目标文件，默认规则内置的style-loader/vue-style-loader会自动将编译后的CSS插入顶层DOM，和你自定义的规则执行逻辑冲突。

方案1：调整全局Loader规则（推荐） #

修改nuxt.config.js中的Webpack配置，先让默认的SCSS处理规则跳过你指定后缀的文件，仅由你的自定义规则处理：

// nuxt.config.js
export default {
  build: {
    extend(config) {
      // 找到默认处理scss的规则，排除.extract.scss后缀的文件
      const scssRule = config.module.rules.find(rule => rule.test.toString().includes('scss'))
      if (scssRule) {
        scssRule.exclude = /\.extract.scss$/
      }
      // 保留你原本的自定义规则
      config.module.rules.push({
        test: /\.extract.scss$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[contenthash].css',
            }
          },
          'extract-loader',
          'css-loader',
          'sass-loader',
        ]
      })
    }
  }
}

配置完成后调用require('/path-to/some.extract.scss')就只会返回编译后的CSS文件URL，不会自动插入style标签。

方案2：Webpack5 原生Asset模块替代（更简洁） #

如果你使用的是Webpack5，可以直接用内置的asset/resource能力替代第三方loader，不需要额外安装file-loader、extract-loader：

// nuxt.config.js build.extend 内的自定义规则改为
config.module.rules.push({
  test: /\.extract.scss$/,
  exclude: /node_modules/,
  type: 'asset/resource',
  generator: {
    filename: '[contenthash].css'
  },
  use: [
    'css-loader',
    'sass-loader'
  ]
})

同样需要先给默认SCSS规则加上对应exclude配置，效果和方案1完全一致。

方案3：Inline Loader强制指定处理逻辑（适合少量使用场景） #

如果不想修改全局配置，可以在require时通过inline loader强制指定处理逻辑：

const cssUrl = require('!!file-loader?name=[contenthash].css!extract-loader!css-loader!sass-loader!@/path/to/some.extract.scss')

前缀!!是Webpack inline loader的语法，作用是禁用全局配置的loader，避免重复处理，直接使用返回的cssUrl插入iframe的link标签即可。

内容的提问来源于stack exchange，提问作者user3482902