Реагируйте: не работает импорт имени класса CSS - PullRequest
Новая
       8

Реагируйте: не работает импорт имени класса CSS

0 голосов
/ 01 декабря 2018

У меня есть <main> div в моем компоненте реагирования, и я импортирую некоторое имя класса из файла класса, но имя класса не интегрируется в основной div, когда я пытаюсь проверить его в браузере.когда я просто использую другие имена классов, он работает как <main className="test">, но импорт классов не работает.

Это мой компонент: 

import React from 'react';
import Aux from '../../hoc/Aux';
import classes from './Layout.css';

const layout = (props) => (
<Aux>
    <div>
        Test paragraph
    </div>
    <main className={classes.Content}>
        {props.children}

    </main>
</Aux>
);

export default layout;

Это мой css 

.Content{
   color: red;
   margin-top: 20px;
}

Я сделал команду npm run eject после создания, если что-то связано с файлом конфигурации веб-пакета, пожалуйста, помогите мне (я не внес никаких изменений после команды eject)

Вот часть cssконфигурационного файла webpack dev 

{
        test: cssRegex,
        exclude: cssModuleRegex,
        use: getStyleLoaders({
          importLoaders: 1,
        }),
      },
      // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
      // using the extension .module.css
      {
        test: cssModuleRegex,
        use: getStyleLoaders({
          importLoaders: 1,
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
        }),
 },

Ответы [ 7 ]

0 голосов
/ 18 апреля 2019

Вы должны настроить некоторые сотрудники.выполните следующие действия:

  1. npm run eject запустите эту команду в корневом каталоге вашего проекта

  2. , найдите cssRegex и добавьте следующие строки в use: getStyleLoaders({

        modules:true,
    localIdentName:'[name]__[local]__[hash:base64:5]'

Наслаждайтесь!

0 голосов
/ 06 июля 2019

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

Я обновил свой файл webpack.config.js в строке 420, и тогда он работал для меня.Пожалуйста, попробуйте.

enter image description here

line 420:

  • localIdentName: '[name] [local] [hash: base64: 5] ',
0 голосов
/ 28 марта 2019

На самом деле я использовал это так: 

import classes from './Layout.module.css';

Как вы видите в тексте вашего вопроса:

// используя расширение .module.css

0 голосов
/ 12 марта 2019

Чтобы использовать имена классов как объект, вам нужно сделать 2 вещи:

  1. Создать импорт как import * as classes from './Layout.css';
  2. Включить определение типов для вашего стиля.

Пример для Typescript - создайте Layout.css.d.ts файл с export const Content: string;

Убедитесь, что вы определили опцию camelCase для css-loader чтобы преобразовать dash-классы в свойства case-верблюда, которые вы определили в Layout.css.d.ts .

0 голосов
/ 04 декабря 2018

В вашем файле CSS:
Оберните ваши классы и идентификаторы с :local(.className)

Пример
:local(.Content) { width: 100px; }

В вашем реактивном компоненте:
import classes from './stylesheet.css'

<div className={classes.Content}></div>

0 голосов
/ 01 декабря 2018

import './Layout.css';

Затем используйте его как обычный CSS

<main className="Content">

0 голосов
/ 01 декабря 2018

Не нужно ли указывать расширение файла, например import classes from './layout.css';?

Попробуйте установить style-loader и css-loader пакеты.Затем добавьте в ваш веб-пакет: 

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

Я получил, если из документация css-modules , и я надеюсь, что это поможет вам достичь того, что вам нужно.

...