javascript - 接下来如何在react SSR框架中使用TS+css+scss？

Question

我在 nextJS 中使用 TS + CSS + SCSS。我将导入一些 CSS 文件，但我想为这些 CSS 文件设置 cssModule:false，然后我将导入我自己的 SCSS 文件并设置 cssModule:true。

下面是我在 next.config.js 中的代码，它将 CSS 文件传输到模块。

const withSass = require("@zeit/next-sass");
const withTypescript = require("@zeit/next-typescript");
const withCSS = require("@zeit/next-css");
module.exports = withTypescript(
    withCSS(
      withSass({
        cssModules: true
      })
    )
);

能否就导入 CSS 文件的正确方法向我提供建议？

Answer 1

next-css的配置是全局的，你要么使用cssModules，要么不使用。

我的解决方案是手动配置 webpack 以不对具有 .global.css 后缀的文件应用 cssModules。

config.module.rules.forEach(rule => {
  if (rule.test.toString().includes('.scss')) {
    rule.rules = rule.use.map(useRule => {
      if (typeof useRule === 'string') {
        return {
          loader: useRule,
        };
      }
      if (useRule.loader.startsWith('css-loader')) {
        return {
          oneOf: [
            {
              test: /\.global\.scss$/,
              loader: useRule.loader,
              options: {
                ...useRule.options,
                modules: false,
              },
            },
            {
              loader: useRule.loader,
              options: useRule.options,
            },
          ],
        };
      }

      return useRule;
    });

    delete rule.use;
  }
});

有一个open PR让 next-css 包含与 lib 类似的解决方案。