Сайт React / Webpack внезапно теряет CSS - PullRequest
Новая
       22

Сайт React / Webpack внезапно теряет CSS

0 голосов
/ 08 мая 2019

Я создаю сайт с помощью React / Node / Express / Webpack / Material-UI.

Это как-то связано с JSS ... Использование run dev работает, но после build ing, когда я нажимаю некоторые кнопки с действиями 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"
  ]
}

JSS материал в client.js: 

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'));

1 Ответ

1 голос
/ 08 мая 2019

Вы можете попробовать использовать 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 run build, предоставленный при создании приложения с react-create-app, их конфигурацией сборки основаны на webpack, и результат довольно удовлетворительный.

...