стили, импортированные с не работающим css-загрузчиком

Question

Создание приложения реакции 16.4.0 с помощью начальной загрузки 4.1.1.

Я использую css-загрузчик с веб-пакетом для создания пользовательских таблиц стилей для каждого компонента в моем приложении.

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

Базовый пример:

Компонент Sidebar.js:

import React from 'react';
import classes from './Sidebar.css';

const sidebar = (props) =>  {
    console.log('classes.red:', classes.red);
    return (
        <div>
            <h3 className={classes.other}>Testing Stylesheet</h3>
            <nav className="col-sm-3 col-md-2 hidded-xs-down sidebar" id={classes.red}>
                <ul className="nav flex-column">
                    <li className="nav-item">
                        <a className="nav-link active" href="#">
                            FF1493
                        </a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link active" href="#">
                            FF4500
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    )
}

export default sidebar;

Вот очень простая таблица стилей:

#red {
    background-color: rgba(214, 21, 21, 0.842)
}

.other {
    color: green;
}

В Sidebar.jsВы можете видеть, где я утешаю. logging импортированный красный стиль.Вот что входит в консоль браузера: classes.red: Sidebar__red__2-sUP <- вводит уникальный идентификатор, как и должно быть.</p>

Для тех, кто хочет знать, вот мой webpack.config:

const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');

const SRC_DIR = path.join(__dirname, '/client/src');
const DIST_DIR = path.join(__dirname, '/client/dist');

module.exports = {
    entry: `${SRC_DIR}/index.jsx`,
    output: {
      path: path.resolve(__dirname, 'client/dist'),
      filename: 'bundle.js',
    },
    module: {
      rules: [
        {
          test: /\.jsx?/,
          include: SRC_DIR,
          loader: 'babel-loader',
          query: {
            presets: ['react', 'es2015'],
            plugins: ['syntax-dynamic-import'],
          },
        },
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract(
            Object.assign(
              {
                fallback: {
                  loader: require.resolve('style-loader'),
                  options: {
                    hmr: false,
                  },
                },
                use: [
                  {
                    loader: require.resolve('css-loader'),
                    options: {
                      importLoaders: 1,
                      minimize: true,
                      // sourceMap: shouldUseSourceMap,
                      modules: true,
                      localIdentName: '[name]__[local]__[hash:base64:5]'
                    },
                  },
                  {
                    loader: require.resolve('postcss-loader'),
                    options: {
                      // Necessary for external CSS imports to work
                      // https://github.com/facebookincubator/create-react-app/issues/2677
                      ident: 'postcss',
                      plugins: () => [
                        require('postcss-flexbugs-fixes'),
                        autoprefixer({
                          browsers: [
                            '>1%',
                            'last 4 versions',
                            'Firefox ESR',
                            'not ie < 9', // React doesn't support IE8 anyway
                          ],
                          flexbox: 'no-2009',
                        }),
                      ],
                    },
                  },
                ],
              },
              // extractTextPluginOptions
            )
          )
        },
      ],
    },
    resolve: {
      extensions: ['.js', '.jsx']
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify('development'),
        },
      }),
      new ExtractTextPlugin("styles.css"),
      // ,
      // new UglifyJSPlugin(),
    ],
  };

Может ли это быть из-за того, что я закомментировал некоторые вещи в webpack.config: sourceMap: shouldUseSourceMap,под опциями и extractTextPluginOptions?

Я прокомментировал их, потому что я получал ошибки во время установки и не был на 100% уверен в их роли.Я все еще использую веб-пакет и позаимствовал некоторые параметры конфигурации из другого приложения, созданного с помощью приложения Facebook create-реагировать.

Ввод приветствуется.Заранее спасибо!Mike

Answer 1

Вы должны быть в состоянии:

import './Sidebar.css'; //don't name the import

, а затем использовать класс для вашего элемента, например

<h3 className="other">Testing Stylesheet</h3>

(и, как предложил @Leo, откройте Dev Tools и найдите cssчтобы посмотреть, отправлено ли это в браузер)