При загрузке CSS с помощью webpack я могу писать CSS для тегов, но не для классов или идентификаторов

Я загрузил CSS с помощью webpack и умею стилизовать HTML-теги, но не умею стилизовать, используя классы или идентификаторы. Мне интересно, связано ли это с моим заказом зависимостей или тем, как я загружаю CSS.При загрузке CSS с помощью webpack я могу писать CSS для тегов, но не для классов или идентификаторов

Например, это работает:

span { 
    background-color: teal; 
    display: inline-block; 
    width: 20px; 
    height: 75px; /* We'll override this later */ 
}

, но это не делает:

.bar { 
    background-color: teal; 
    display: inline-block; 
    width: 20px; 
    height: 75px; /* We'll override this later */ 
}

Это мой файл webpack.config.js.

const path = require('path'); 

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: './src/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}) 

module.exports = { 
    entry: './src/index.js', 
    output: { 
    path: path.resolve('dist'), 
    filename: 'index_bundle.js' 
    }, 

    module: { 
    rules: [ 
     { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, 
     { 
     test: /\.css$/, 
     use: [ 
      { loader: 'style-loader'}, 
      { 
      loader: 'css-loader', 
      options: { 
       modules: true 
      } 
      }, 
     ] 
     }, 
    ] 
    }, 
    plugins: [HtmlWebpackPluginConfig] 
}

Это - мой HTML-файл.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>D3</title> 
</head> 
<body> 
    <span class="bar"></span> 
</body> 
</html>

Это мой файл index.js.

import * as d3 from 'd3'; 
import styles from './style.css'; 

var dataset = [5, 10, 15, 20, 25];

источник

2017-02-22 maecapozzi

Это отличный первый вопрос! :) – Hatef

Это не работает, потому что вы включили css modules в конфигурации WebPack. Во время сборки классы будут заменены на сгенерированные (локальные классы). Для того, чтобы отключить CSS модулей для конфигурации просто изменить свойство modules: false, как таковые:

use: [ 
    { loader: 'style-loader'}, 
    { 
    loader: 'css-loader', 
    options: { 
     modules: false 
    } 
    }, 
]

Или, если вы хотите сохранить CSS модулей и решить эту проблему вы должны либо:

1) использовать сгенерированные классы в HTML

2) изменить селекторы глобальна, как:

:global{ 
    .bar { 
     background-color: teal; 
     display: inline-block; 
     width: 20px; 
     height: 75px; /* We'll override this later */ 
    } 
}

источник

2017-02-22 21:18:33

При загрузке CSS с помощью webpack я могу писать CSS для тегов, но не для классов или идентификаторов

ответ

Смежные вопросы