После обновления нашего проекта до новой версии реакции (15.6
до 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?module&localIdentName=${config.get('classnames:production')}&-minimize!postcss`)
}, {
test: /\.sss$/,
loader: ExtractTextPlugin.extract('style', `css?module&localIdentName=${config.get('classnames:production')}&-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;
Я почти уверен, что дал слишком мало информации, чтобы полностью понять ситуацию. Возможно, вы подскажете, на что мне следует обратить внимание и как вообще решать такие проблемы, поскольку при запуске приложения ошибок нет.
Спасибо за любой ваш совет!