Нормальный CSS с модулями CSS - PullRequest
Новая
       27

Нормальный CSS с модулями CSS

0 голосов
/ 04 октября 2018

Раньше я использовал начальный импорт начальной загрузки css.

Однако я пытаюсь использовать модуль CSS, поэтому добавил несколько строк. 

  {
        test: /\.css$/,
        use:  [
          'style-loader',
          { 
            loader: 'css-loader', 
            options: { 
              importLoaders: 1, 
              modules: true, //<- Added to enable css module
              localIdentName: '[name]__[local]___[hash:base64:5]' //<-Added to enable css module
            }
          },
          'postcss-loader'
        ]
      },

Теперь я могуиспользуйте следующие примеры кодов 

  import styles from 'styles.css'

и используйте его в коде, подобном этому 

  <div className={styles.container}></div>

, и это становится таким в браузере 

  <div class="styles__container___3dfEE"></div>

В моем index.js есть следующее: 

  import 'bootstrap/dist/css/bootstrap.min.css';

Теперь все мои классы из bootstrap.min.css больше не работают.

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

В настоящее время я использую «грязный» способ сделать это, сохранив свои собственные стили в качестве стилей.sss вместо этого и добавил следующие коды в конфигурацию webpack.Не уверен, будут ли у него какие-либо проблемы. 

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

Ответы [ 3 ]

0 голосов
/ 04 октября 2018

Ранее я изучил несколько методов для этой проблемы с запросом Github .

Сначала измените имя файла.Самый простой способ, но безобразный.

Измените styles.css на styles.m.css и выделите модуль и простой CSS, например 

//Module
test: /\.m.css$/
//Plain
test: /\^((?!\.m).)*css$/

Во-вторых, разделите папки для модуля и простого CSS,в то время как исключают друг друга. 

//Module
exclude: /css/plain/
//Plain
exclude: /css/module/

В-третьих, используйте resourceQuery

test: /\.css$/,
oneOf: [{
    resourceQuery: /^\?raw$/,
    use: [...]
}

И импортируйте как 

import './bootstrap.min.css?raw'
0 голосов
/ 04 октября 2018

Попробуйте разделить загрузчики на разные правила.Как это: 

{
  test: /\.css$/,
  use:  [
    'style-loader',
  ]
},
{
  test: /\.css$/,
  use:  [
    { 
      loader: 'css-loader', 
      options: { 
        importLoaders: 1, 
        modules: true,
        localIdentName: '[name]__[local]___[hash:base64:5]'
      }
    },
    'postcss-loader'
  ]
}
0 голосов
/ 04 октября 2018

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

import "!style-loader!css-loader!bootstrap/dist/css/bootstrap.min.css";

это активирует загрузчик стилей и загрузчик css, но без опции modules: true

...