Стили не импортируются в компонент

Я пытаюсь импортировать стили из файла CSS и не могу ничего импортировать. Вот как я это импортирую

import React    from 'react'

import * as styles from './styles.css'

/* eslint-disable */
console.log('******************************************')
console.log(styles) // /styles.[hashValue].css
console.log('******************************************')

export default function SideNav() {
  return (
    <div className={'navBar'}>{'Side Nav'}</div>
  )
}

Я использую Webpack для комплектации. Вот код CSS-обработчика:

/ * eslint-disable import / no-посторонние зависимости * / import MiniCssExtractPlugin из 'mini-css-extract-plugin'

const devStyleConfig = [
  {
    loader  : MiniCssExtractPlugin.loader,
    options : {
      hmr : true
    }
  },
  {
    loader  : 'css-loader',
    options   : {
      importLoaders    : 1,
      modules          : true,
      sourceMap        : false,
      camelCase        : true,
      localIdentName   : '[path][name]--[local]--[hash:base64]'
    }
  },
  {
    loader  : 'postcss-loader'
  }
]

export default devStyleConfig

Вот ссылка на мой полный конфиг веб-пакета . Не уверен, что мне здесь не хватает.

Всего 1 ответ


Вы должны иметь CSS-модули примерно так

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

Ссылка для другого решения


Есть идеи?

10000