在 React 应用程序中启用带有 CSS 模块的 PrimeReact 主题

Question

我在 React 应用程序的webpack.config中启用了CSS 模块，以便我可以在本地将 CSS 文件范围限定为单个组件。我也试图从使用TabView的组件PrimeReact。当我这样做时，不应用 PrimeReact 的主题。如果我创建一个单独的项目并且不启用 CSS 模块，则主题会正确应用。

如何使用 PrimeReact 主题并启用 CSS 模块？

我已经测试将位于 Tabs.js 中的内容直接移动到 App.js 中并获得相同的结果。

启用 CSS 模块

配置文件

require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]__[hash_base64:5]'
            },
          },

应用程序.js

import React, { Component } from 'react';
import classes from './App.css';
import Tabs from './UI/Tabs';

class App extends Component {
  render() {
    return (
        <Tabs/>
    );
  }
}

export default App;

标签页.js

import React from 'react';
import {TabView, TabPanel} from 'primereact/components/tabview/TabView';
import classes from 'primereact/resources/primereact.css';
import theme from 'primereact/resources/themes/cupertino/theme.css';

const Tabs = () => (
        <TabView>
        <TabPanel header="Tab One">
          This is content for Tab One.
          </TabPanel>
           <TabPanel header="Tab Two">
          This is content for Tab Two.
          </TabPanel>
        </TabView>
);

export default Tabs;

默认 React 全局 CSS 范围

启用 CSS 模块（本地组件范围）

Answer 1

我能够使用 CSS 模块并通过修改 webpack.config 选择性地将全局范围应用于 PrimeReact 的主题，如下所示。

原来的：

{
            test: /\.css$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true,
                  localIdentName: '[name]__[local]__[hash:base64:5]'
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
            ],
          },

修改的：

 {
            test: /\.css$/,
            //Exclude 3rd party css that needs to be scoped globally from using
            //css-loader with modules enabled
            exclude: [
              path.resolve('node_modules/primereact/resources/primereact.css'),
              path.resolve('node_modules/primereact/resources/themes/cupertino/theme.css'),
            ],
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true,
                  localIdentName: '[name]__[local]__[hash_base64:5]'
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
            ],
          },
          //Additional css-loader configuration
          {
            test: /\.css$/,
            //Inlcude only 3rd party css that needs to be scoped globally to use
            //css-loader with modules disabled
            include: [
              path.resolve('node_modules/primereact/resources/primereact.css'),
              path.resolve('node_modules/primereact/resources/themes/cupertino/theme.css'),
            ],
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
            ],
          },