Sử dụng css-loader nội tuyến với Webpack + React

Question

Tôi đang xây dựng ứng dụng React của mình với Webpack và css-loader w/modules. Tôi thích nó. Tuy nhiên, hầu hết các bảng định kiểu của tôi rất nhỏ và tôi muốn nội tuyến chúng trong cùng một tệp JSX như là đánh dấu và JavaScript của tôi.

CSS nạp Tôi đang sử dụng ngay bây giờ trông như thế này:

{ test: /\.(css)$/i, 
    loader: ExtractTextPlugin.extract("style-loader", "css-loader?modules") } 

Trong JSX của tôi, tôi import file CSS riêng của tôi như thế này:

import classNames from 'dashboard.css'; 
... 
<div className={classNames.foo}></div>; 

này sau đó được biên soạn và dịch vào một cái gì đó như:

<div class="xs323dsw4sdsw_"></div> 

Nhưng những gì tôi muốn làm là một cái gì đó giống như dưới đây, trong khi vẫn duy trì các mô-đun được bản địa hóa mà css-loader cung cấp cho tôi:

var classNames = cssLoader` 
    .foo { color: blue; } 
    .bar { color: red; } 
`; 

... 
<div className={classNames.foo}></div>; 

Điều này có thể không? Làm thế nào tôi có thể làm điều này mà không cần phải thực sự require/import một tệp riêng biệt?

Answer 1

Tôi tin rằng vấn đề của bạn là bạn cấu hình webpack hiện tại của bạn sử dụng Mô-đun CSS. CSS Module tự động đổi tên các lớp CSS của bạn để tránh xung đột tên lớp toàn cầu.

Việc sửa chữa:

// remove 'modules' from the end of your css-loader argument 

{ test: /\.(css)$/i, 
    loader: ExtractTextPlugin.extract("style-loader", "css-loader?modules") } 

// like so 

{ test: /\.(css)$/i, 
    loader: ExtractTextPlugin.extract("style-loader", "css-loader") } 

Bây giờ tên lớp của bạn sẽ được bảo tồn. Mặc dù, tôi không chắc chắn lý do tại sao bạn muốn làm điều này. Bạn có quan tâm để chia sẻ lý do tại sao?