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

【问题标题】：how to use TS+css+scss in react SSR framework next?接下来如何在 React SSR 框架中使用 TS+css+scss？
【发布时间】：2019-06-16 08:58:35
【问题描述】：

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

【问题讨论】：

我正在使用 antd，所以我像这样导入 css 文件：import "antd/dist/antd.css";

标签： javascript css reactjs sass next.js

【解决方案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 类似的解决方案。

【讨论】：