React / Webpack网站突然丢失CSS

Question

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

这与JSS有关。使用run dev作品，但是在build之后，当我用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配置进行任何花哨的操作或特定的webpack ，则还可以使用在使用react-create-app创建应用程序时提供的react run build ，其构建配置基于webpack ，结果很不错satisfatory。