Как разрешить модулям CSS импортировать файлы глобально по умолчанию?

Я пытаюсь внедрить модули CSS в свой проект, использующий React и Webpack. Но я хочу продолжать использовать весь созданный мной глобальный CSS.

Например, ранее я импортировал css в React вот так

import './styles.scss'

И тогда будет элемент html, использующий класс .button, который существует внутри ./styles.scss

<button className='button'>Click me</button>

Теперь, когда я хочу реализовать модули CSS, я изменил конфигурацию css-loader в webpack следующим образом

module: {
  rules: [{
    test: /\.s?css$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          // This is where I added the config for css modules
          modules: true,
          localIdentName: '[hash:base32:5]-[name]-[local]',
          importLoaders: 2,
        }
      },
      {
        loader: 'postcss-loader',
        options: {
          config: {
            path: './postcss.config.js',
          },
        },
      },
      'sass-loader',
    ]
  }]
}

Однако теперь я не могу использовать button имя класса при импорте таким образом

import './styles.scss'

Поскольку имена классов в ./styles.scss все преобразуются в имена классов на основе хешей, такие как 32osj-home-button

В принципе, как мне настроить css-loader для нормальной загрузки css, когда я импортирую таким образом

import './styles.scss'

Но использовать модули css, когда я импортирую таким образом?

import styles from './styles.scss'

OR

Есть ли какая-либо конфигурация, позволяющая настроить модули css для загрузки всех css в :global по умолчанию и загрузки css только в :local, когда я это укажу?

К вашему сведению, я знаю, что могу создать 2 конфигурации загрузчика для применения модулей css для файла css с таким именем

styles.modules.scss

и примените обычный css-loader по умолчанию с именем css

styles.scss

Но я предпочитаю этого не делать, поскольку после объединения их в Webpack будет создано больше файлов.


webpack reactjs css-modules css-loader
person Adriel    schedule 19.12.2017    source источник

Ответы (2)


arrow_upward
6
arrow_downward

С модулями css я использую это так:

import styles from './styles.scss'

<button className={styles.button}>Click me</button>

Импортированные стили представляют собой карту с [className] => [hashed_className]

Все, что вы помещаете в блок: global, не преобразуется в хешированные имена css

:global {
    .button {
        color: #FF0000;
    }
}
.button {
    color: #000000;
}

должен выводить

.button {
    color: #FF0000;
}
.32osj-home-button {
    color: #000000;
}
person Stefan van de Vooren    schedule 19.12.2017

arrow_upward
3
arrow_downward

Это моя установка ... Я могу делать то, что вы хотите.

module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        },

        {
            test: /\.scss$/,
            loader: ExtractPlugin.extract(['css-loader', 'sass-loader']),
        },
        {
            test: /\.css$/,
            exclude: [/\.global\./, /node_modules/],
            loader: ExtractPlugin.extract(
                {
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 1,
                                modules: true,
                                autoprefixer: true,
                                minimize: true,
                                localIdentName: '[name]__[local]___[hash:base64:5]'
                            }
                        }
                    ]
                })
        },
        {
            test: /\.css/,
            include: [/\.global\./, /node_modules/],
            loader: ExtractPlugin.extract(
                {
                    fallback: 'style-loader',
                    use: ['css-loader']
                })
        },
        {
            test: /\.(woff|woff2|ttf|eot|glyph|\.svg)$/,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: 'font/[name].[ext]',
                    },
                },
            ],
        },
        {
            test: /\.(jpg|jpeg|gif|png|tiff|svg)$/,
            exclude: /\.glyph.svg/,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 6000,
                        name: 'image/[name].[ext]',
                    },
                },
            ],
        },
        {
            test: /\.(mp3|aac|aiff|wav|flac|m4a|mp4|ogg)$/,
            exclude: /\.glyph.svg/,
            use: [
                {
                    loader: 'file-loader',
                    options: { name: 'audio/[name].[ext]' },
                },
            ],
        },
person Gavin Thomas    schedule 19.12.2017
comment
Спасибо за ответ, но я думаю, что это не совсем то, что я ищу. CMIIW, но в основном вы исключаете файлы, содержащие .global., которые нужно анализировать как модули css. У меня уже есть много файлов css, и я хочу сохранить имена и расположение этих файлов одинаковыми. Если я сделаю это по-вашему, мне нужно будет либо изменить их имена файлов, либо переместить их в папку .global., чего я не хочу делать. - person Adriel; 19.12.2017