Использование css-loader без React

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

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

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

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


webpack css css-modules css-loader bundling-and-minification
person Shrey Gupta    schedule 08.03.2019    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Этот код на 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>

Сообщите мне, если у вас возникнут проблемы

person Moorthy G    schedule 13.03.2019
comment
Разве это не привело бы к повторному добавлению всего кластера, удаленного из Webpack, в отношении имен классов? - person Jake; 15.03.2019
comment
да. Вот почему его никто не предпочитает! - person Moorthy G; 15.03.2019
comment
Чувак, мне пришлось часами искать это! Итак, что, если HTML имеет форму шаблонов? У меня есть более подробный вопрос здесь stackoverflow.com/questions/63956885/ - person viv; 18.09.2020

arrow_upward
1
arrow_downward

Насколько я понимаю, Webpack, CSS-модули и CSS-Loader заключаются в том, что весь смысл заключается в использовании javascript для создания файлов.

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

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

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

person Bryce Howitson    schedule 12.03.2019
comment
Но что, если вы создаете легкий виджет? Можно было бы избежать использования фреймворков, и проекту потребуется css scoping - person viv; 19.09.2020