Question

我在nextJS中使用TS + CSS + SCSS。我将导入一些CSS文件，但是我想将cssModule:false设置为这些CSS文件，然后导入我自己的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，使其不对后缀为cssModules的文件应用.global.css。

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;
  }
});

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

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

1 个答案: