Задать вопрос
@RaulDuke
javascript

Как из DOM получить имена классов CSS?

Всем привет.

Подскажите пожалуйста, как без Vue и React организовать CSS модули. В конфиге webpack:

// ...
  module: {
    rules: [
      {
        test: /\.sass$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader?modules&localIdentName=[hash:base64:5]&minimize', 'sass-loader']
        })
      }
    ]
  }

// ...


На выходе я получаю имена вида Bk_5f и все хорошо, однако я никак не могу сообразить как мне получить доступ к этим именам из DOM.

весь конфиг webpack
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlMinifier = require('html-minifier').minify;

module.exports = {
  entry: {
    base: './src/base.js',
    index: './src/index.js'
  },
  output: {
    filename: '[chunkhash:7].js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.sass$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader?modules&localIdentName=[hash:base64:5]&minimize', 'sass-loader']
        })
      }
    ]
  },
  devServer: {
    stats: 'errors-only'
  },
  plugins: [
    new ExtractTextPlugin({
      filename: '[md5:contenthash:hex:7].css'
    }),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      minify: htmlMinifier
    })
  ]
};

./src/base.js
import './base/style.sass';
import './base/logic.js';

./base/style.sass
.page
  background-color: #333

./src/index.html
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="manifest" href="site.webmanifest">
    <link rel="apple-touch-icon" href="icon.png">
  </head>
  <body class="${ ??? }">
    <p>Hello world!</p>
  </body>
</html>

  • Вопрос задан
  • 116 просмотров
Комментировать
Подписаться 2 Средний Комментировать
Решения вопроса 1
k12th
@k12th
console.log(`You're pulling my leg, right?`);
Так же как в React:

// styles.scss

.body { color: red; }


// file.js
import styles from './style.css';

document.body.classList.add(styles.body);
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сверстать веб приложение на vue
24 нояб. 2024, в 19:46
1000 руб./в час
Стили/дизайн/верстка приложения на QT
24 нояб. 2024, в 19:43
30000 руб./за проект
SEO оптимизация мультиязычного сайта и вывод в топы
24 нояб. 2024, в 19:42
200000 руб./за проект
Ещё заказы