React/Webpack 网站突然失去 CSS

Question

我正在使用 React/Node/Express/Webpack/Material-UI 构建一个网站。

这与 JSS 有关...使用 run dev 有效，但在 building 之后，当我单击带有 onClick 操作的一些按钮时，我所有的自定义 CSS 样式都消失了，并被许多错误的.jss 规则。

我如何追踪这个错误？

这是我的webpack.config：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const outputDirectory = 'dist';

module.exports = {
    entry: ['babel-polyfill', './src/client/client.js'],
    output: {
        path: path.join(__dirname, outputDirectory),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader'
            }
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            loader: 'url-loader?limit=100000'
        }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    devServer: {
        port: 3000,
        proxy: {
            '/api': 'http://localhost:8080'
        }
    },
    plugins: [
        new CleanWebpackPlugin([outputDirectory]),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            favicon: './public/favicon.ico'
        })
    ]
};

还有.babelrc:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

client.js 中的 JSS 内容：

import { create } from 'jss';
import rtl from 'jss-rtl';
import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
const generateClassName = createGenerateClassName();
const theme = createMuiTheme({
    direction: 'rtl',
....
});

function RTL(props) {
    return (
        <JssProvider jss={jss} generateClassName={generateClassName}>
            {props.children}
        </JssProvider>
    );
}

function Root() {
    return (
        <RTL>
            <MuiThemeProvider theme={theme}>
                <App />
            </MuiThemeProvider>
        </RTL>
    );
}

render(<Root />, document.querySelector('#root'));

Answer 1

您可以尝试使用postcss-loader，就像我在我的应用中所做的那样：

{
  test: /\.css$/,
  exclude: /node_modules/,
  use: [
    { loader: 'style-loader' },
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1,
        modules: true,
        localIdentName: '[name]__[local]__[hash:base64:5]'
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        plugins: () => [
          autoprefixer({
            browsers: [
              "> 1%",
              "last 2 versions"
            ]
          })
        ]
      }
    }
  ]
},

如果您不打算对webpack 配置做任何花哨或特定的事情，您还可以使用react-create-app 创建应用时提供的react run build，它们的构建配置基于webpack效果还算满意。