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

Posted 2023-03-07

【中文标题】如何在 Next.js 中使用带有顺风 css 的 React Suite？

【英文标题】：How to Use React Suite with tailwind css in Next.js?

【发布时间】：2021-11-26 03:30:33

【问题描述】：

说明

我想使用 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"
  

【问题讨论】：

您可能需要查看next-with-less 插件以支持Less。

我试过了，但在 scss 和 css 上效果不佳

【参考方案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 个性化

【参考方案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";