css и scss не загружены для некоторых компонентов — reactjs

#javascript #css #reactjs #webpack

#javascript #css #reactjs #webpack

Вопрос:

После обновления нашего проекта до новой версии react ( 15.6 to 16.2 ) 70% компонентов React перестали загружать css.

Грубо говоря, css работает только в верхнем и нижнем колонтитулах. Более того, импорт в эти компоненты выполняется идентичным методом.

webpack:

 const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const config = require('../config');
const write = require('./write');
const defaultConfig = require('./default.config');

module: {
        loaders: [{
            test: /.js$/,
            loader: 'babel',
            include: [
                path.resolve(__dirname, '..', 'app'),
                            // path.resolve(__dirname, '..', 'node_modules/react-html-converter'),
                            // path.resolve(__dirname, '..', 'node_modules/react-attr-converter'),
                path.resolve(__dirname, '..', 'client'),
                path.resolve(__dirname, '..', 'utils'),
                path.resolve(__dirname, '..', 'config')
            ]
        }, {
            test: /.css$/,
            loader: ExtractTextPlugin.extract('style', `css?moduleamp;localIdentName=${config.get('classnames:production')}amp;-minimize!postcss`)
        }, {
            test: /.sss$/,
            loader: ExtractTextPlugin.extract('style', `css?moduleamp;localIdentName=${config.get('classnames:production')}amp;-minimize!postcss?parser=sugarss`)
        }]
    }
  

Компонент, в котором css не загружается

 import React, {Component} from 'react';
import {PropTypes as T} from 'prop-types';
import cx from 'classnames';
import Link from 'react-router/lib/Link';
import styles from './index.css';

class Post extends Component {

    render(): any {
        return (
                <Link to={`/news/`} className={styles.container}>
                    <h2 className={styles.title}>{title}</h2>
                </Link>
            </article>
        );
    }
}

export default Post;
  

Я почти уверен, что я дал слишком мало информации, чтобы полностью понять ситуацию. Возможно, вы можете сказать мне, на что я должен обратить внимание и как бороться с такими проблемами в целом, поскольку при запуске приложения ошибок нет.

Спасибо за любой ваш совет!

Комментарии:

1. можно ли использовать giturlв вашем проекте?

2. что такое test: /.sss$/, ? это должно быть test: /.scss$/,

3. Я не знаю, почему так написано, но это работает, честно. К сожалению, я не могу предоставить репозиторий, но если вам нужна какая-либо другая информация для понимания проблемы, я с радостью ее предоставлю. Спасибо за ваш ответ

4. возможно ли опубликовать ваши полные webpack.config.js и package.json ?

5. конечно! вот package.json : jsonblob.com/e425eb0d-641d-11e9-b398-fd61c5621694 , и production.config.js из папки wepback: jsfiddle.net/g865ybtj . большое вам спасибо 🙂