如何在 Next.js 中使用带有顺风 css 的 React Suite？

Question

说明

我想使用 React Suite 和 tailwind，所以我按照文档中的安装说明安装了 tailwind 它工作正常，但是当我安装 React Suite 并在 next.config.js 文件中添加一些配置时，tailwind 不再工作，并且 React Suite 工作人员很好，我认为问题出在这个文件上 我希望你能帮我解决这个问题

代码

the example in code sandbox

_app.js

import React, { useEffect } from 'react'
import 'rsuite/styles/index.less'
import 'assets/styles/globals.css'
import { Provider } from 'react-redux'
import { useStore } from 'redux/store/index'
import { LANGUAGE } from 'redux/store/actionTypes'

function MyApp({ Component, pageProps }) {    
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  )
}

export default MyApp

tailwind.config

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
  prefix: 'tw-',
}

postcss.config

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,
    Droid Sans, Helvetica Neue, sans-serif;
  
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

next.config.js

我认为问题出在这里

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  reactStrictMode: true,
  webpack(config) {
    config.module.rules.push({
      test: /\.(le|c)ss$/,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
        },
        {
          loader: 'less-loader',
          options: {
            sourceMap: true,
            lessOptions: {
              javascriptEnabled: true,
            },
          },
        },
      ],
    })

    config.plugins.push(
      new MiniCssExtractPlugin({
        filename: 'static/css/[name].css',
        chunkFilename: 'static/css/[contenthash].css',
      }),
    )

    return config
  },
}

package.json

{
  "name": "next-starter-code",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint"
    }
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "dependencies": {
    "axios": "^0.21.4",
    "i18next": "^21.2.0",
    "next": "11.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-i18next": "^11.12.0",
    "react-redux": "^7.2.5",
    "redux": "^4.1.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.3.0",
    "rsuite": "^5.0.0",
    "sass": "^1.42.1"
  },
  "devDependencies": {
    "autoprefixer": "^10.3.6",
    "babel-eslint": "^10.1.0",
    "css-loader": "^6.3.0",
    "dotenv": "^10.0.0",
    "env-cmd": "^10.1.0",
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-next": "11.1.2",
    "eslint-config-prettier": "^8.3.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^6.1.0",
    "eslint-plugin-i18next": "^5.1.2",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.26.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "husky": "^7.0.2",
    "less": "^4.1.2",
    "less-loader": "^10.0.1",
    "lint-staged": "^11.1.2",
    "mini-css-extract-plugin": "^2.3.0",
    "postcss": "^8.3.8",
    "prettier": "^2.4.1",
    "pretty-quick": "^3.1.1",
    "tailwindcss": "^2.2.16",
    "webpack": "^5.57.1"
  }
}

Answer 1

我遇到了同样的问题，似乎当您添加使用 NextJS 所需的 webpack 配置时

test: /\.(le|c)ss$/,

这会导致将 css-loader 和 less-loader 应用到 tailwind 包中的 css 文件。所以我尝试这样做：

test: /\.less$/,

上述确实消除了错误，但随后顺风停止工作。 这是我的顺风风格（没有 rsuite 配置）

Tailwind CSS Styling

这是我的顺风风格（使用我修改后的配置）

RSuite overriding Tailwind

我相信我们可能需要一个不同的 webpack 配置来处理 RSuite 中的 .less 和 Tailwind 中的 .css 个性化

Answer 2

只需更改正则表达式

test: /\.(le|c)ss$/,

到

test: /\^(?!tailwind.css).(le|c)ss$/,

这样做会在使用 css-loader 或更少的加载器处理时排除顺风 css 文件，并且一切都开始按应有的方式工作

可能存在一些视觉缺陷，可以通过编写自定义 css 来覆盖。

另外，为了让组件样式保持顺风，请确保在 _app.js（或 _app.tsx）中的 rsuite css 之后导入顺风，如下所示

import "rsuite/dist/rsuite.min.css";

import "tailwindcss/tailwind.css";
import "../styles/styles.css";