При использовании css-загрузчика импортированный объект стиля пуст - PullRequest
Новая
       3

При использовании css-загрузчика импортированный объект стиля пуст

0 голосов
/ 25 мая 2018

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

Header.js: 

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

const header = () => {
    console.log('classes obj', classes);

    return (
        <div className={classes.Header}>
            <h1>Title Goes Here</h1>
        </div>
    )
}


export default header;

А вот мой файл Header.css: 

.Header {
    background-color:  rgb(49, 118, 197);
}

А вот фрагмент моей конфигурации веб-пакета дляdev: 

test: /\.css$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true,
                  localIdentName: '[name]__[local]__[hash:base64:5]'
                },
              },

И фрагмент моей конфигурации веб-пакета для prod: 

    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]',
              },
            },

Аналогичный вопрос, заданный здесь , но конфигурация веб-пакета выглядит слишком отличной для реализациирешение.

Вы можете видеть в моем Header.js я console.logging классы obj, которые я импортирую, но это пустой объект.

Есть какие-нибудь подсказки?Спасибо!

Ответы [ 3 ]

0 голосов
/ 25 мая 2018

Ладно, ответ для других глупых людей, как я.Перезапустите процесс сборки после установки css-loader.

0 голосов
/ 25 мая 2018

Вы можете попробовать это {test: /.css$/, loader: 'style! Css-loader? Modules & importLoaders = 1 & localIdentName = [name] [local] _ [hash: base64: 5]'}

0 голосов
/ 25 мая 2018

Вы должны 

import './Header.css'

А затем для компонента: 

<div className="Header">... </div>
...