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

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 文件的正确方法吗？

标签： javascriptcssreactjssassnext.js

Answer 1

The configuration of next-css is global, you either using cssModules or not.

My solution for this was to configure webpack manually to not apply cssModules on files with .global.css suffix.

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

There is an open PR for next-css to include similar solution to the lib.