Как я могу использовать postcss-bem с css-модулями или postcss-js в компоненте React

Я учусь, как использовать postcss-bem для генерации CSS-файлов в стиле bem, но мне интересно, есть ли какой-нибудь пакет, такой как CSS-модули или Postcss-JS, который я мог бы использовать для выполнения чего-то вроде ниже:

const ReactComp extends React.Component{
  render(){
    let styles = './postcss-bem.css'
    return <div class={styles.blockname}>something</div>
  }
}

Я нашел эту функцию в документах CSS-модулей и Postcss-JS, но когда я пытаюсь использовать postcss-загрузчик webpack с postcss-JS для синтаксического анализа postcss-bem.css

loaders: ["style-loader", "css-loader", "postcss-loader? parser = postcss-js"]

Но я получил ошибку, как это

Ошибка сборки модуля: SyntaxError: Неожиданный токен ILLEGAL

Я делаю это неправильно?

Источник

2 ответа

Решение

postcss-js - это решение CSS-in-JS, поэтому оно работает с CSS, написанным на JS.

Согласно расширению файла, вы используете CSS, а не JS в postcss-bem.css.

Также нет никакого смысла использовать плагин postcss-bem с модулями CSS. БЭМ позволяет вам изолировать CSS, используя префикс для каждого селектора. Но модули CSS тоже изолируют CSS. Итак, вы, эти два инструмента PostCSS, делаете то же самое.

Источник

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

//add these code into webpack.config.js
module: {
 loaders: [
  {
  test:   /\.css$/,
  loaders: [
   'style-loader',
   'css-loader?' + 'modules&localIdentName=[name]_[local]_[hash:base64:3]',
   'postcss-loader'
      ],
  }
 ]
},

и в файле JSX мы можем использовать импорт для загрузки токена CSS

export default class Comp1 extends Component{
    render () {
     const css = require( './style.css');
        return <div className={css['Comp_name']}><Comp11 /></div>;
    }
}

Источник
Другие вопросы по тегам