Использование css-загрузчика без React - PullRequest
Новая
       35

Использование css-загрузчика без React

1 голос
/ 08 марта 2019

Я создаю небольшое веб-приложение с CSS-модулями с поддержкой Webpack (через css-загрузчик) и без React. Моя цель - получить преимущества коротких, запутанных имен классов CSS (так как в настоящее время я использую длинные имена классов БЭМ) в моем HTML с помощью опции localIdentName: '[hash:base64:8]' в css-loader. Поскольку я не использую React, я работаю с необработанным HTML, который , а не , генерируется программным путем через файл JSX или document.write.

.

Я уже использовал css-загрузчик с React много раньше, и он в конечном итоге работает, потому что вы можете импортировать имена классов стилей в файле React и ссылаться на них, используя понятные человеку имена, независимо от того, какой класс имя меняется на Webpack.

Однако я не совсем понимаю, как справиться с этим при использовании необработанного HTML ; Я не могу просто импортировать стили, так как это не файл JS. Если у меня есть класс с именем photo__caption--large, на который ссылается мой HTML, и webpack преобразует имя класса в d87sj, в файле CSS будет указано d87sj, но в HTML все равно будет указано photo__caption--large.

Существует ли какой-либо загрузчик для файлов HTML, который может редактировать имена классов в файле в соответствии с их Webpackified эквивалентами? Или мне действительно стоит использовать React с модулями CSS?

Ответы [ 2 ]

1 голос
/ 13 марта 2019

Этот код GitHub может вам помочь.https://github.com/moorthy-g/css-module-for-raw-html

Требуется немного сложной настройки.Нам нужно соединить следующие пакеты вместе.
- postcss-loader
- postcss-modules
- posthtml-css-modules
- posthtml-loader

Следующая конфигурация postcss создаетфайл дампа модулей (./tmp/module-data.json).

// postcss.config.js
module.exports = {
    plugins: {
    'postcss-modules': {
      getJSON: function(cssFileName, json) {
        const path = require('path'), fs = require('fs');
        const moduleFile = path.resolve('./tmp/module-data.json');
        const cssName = path.basename(cssFileName, '.css');
        const moduleData = fs.existsSync(moduleFile) ? require(moduleFile) : {};
        moduleData[cssName] = json;
        fs.existsSync('./tmp') || fs.mkdirSync('./tmp');
        fs.writeFileSync(moduleFile, JSON.stringify(moduleData));
      },
      generateScopedName: '[local]_[hash:base64:5]'
    }
  }
}

И следующее правило веб-пакета связывает html-файл с файлом дампа модулей. 

{
  test: /\.html$/,
  use: [
    { loader: 'html-loader' },
    {
      loader: 'posthtml-loader',
      options: {
        plugins: [
          require('posthtml-css-modules')('./tmp/module-data.json')
        ]
      }
    }
  ]
}

Наконец, HTML использует атрибут css-module вместо class

<div css-module="main.container">
  <h2 css-module="main.title">Title for the page</h2>
</div>

Дайте мне знать, если у вас возникнут проблемы

1 голос
/ 12 марта 2019

Мое понимание Webpack, CSS-модулей и CSS-загрузчика состоит в том, что весь смысл в том, чтобы использовать javascript для генерации файлов.

Это позволяет переводить все имена, а что нет.Какова ваша цель с Webpack, если вы пишете статический HTML?

Есть несколько генераторов статических сайтов для Webpack, которые позволят вам получить желаемый результат, НО они все еще строятфайлы HTML.

В качестве альтернативы вы могли бы взглянуть на инструменты, подобные React (Vue или Angular), которые позволяют вам писать все ваши «шаблоны» в прямом HTML.Например, в Vue вы можете писать только HTML (для компиляции из javascript) без необходимости использовать какие-либо привязки данных или маршрутизацию.

...