неопределенные имена классов модуля css

У меня есть следующий компонент, импортированная конфигурация css и webpack - очевидно, что я импортировал соответствующий модуль css, но связь между моим выходом реакции className={css__main.container} и импортированным css-loader, похоже, не была произведена реакцией - css_main.container не сопоставление с .main__container___2MJY (он возвращает undefined и поэтому response / webpack не включает в вывод) - я уверен, что будучи новичком в модулях css, я только что пропустил шаг, может ли кто-нибудь указать, что это может быть? ("css-loader": "^0.28.11" устанавливается в package.json).

import React from 'react';
import {Route, browserHistory, Switch, Link, BrowserRouter, HashRouter} from 'react-router-dom';
import css__main from "../css/main.css";

import NoMatch from "./no-match.js";
import ButtonLink from "../components/buttonLink.js";
import List from "./lists/list-base.js";
import Home from "./subs/home.js";


class Main extends React.Component {
  render(){
    console.log( JSON.stringify( css__main ));
    //[["./src/css/main.css",".main__container___2MJY_{border:1px solid #d0d0d0;-moz-box-shadow:0 0 8px #d0d0d0;box-shadow:0 0 8px #d0d0d0;overflow:hidden;height:80vh;display:flex;flex-direction:column;justify-content:flex-start}.main__header___3ZGBv{color:#444;background-color:transparent;border-bottom:1px solid #d0d0d0;font-size:1.2em;height:65px;display:flex;flex-direction:row;align-items:stretch;justify-content:space-between;padding:15px 20px}",""]]
    return (
      <div id="container" className={css__main.container}>
        <div className={css__main.header}>
          Flix AB Testing
        </div>
        <HashRouter history={browserHistory}>
          <Switch>
            <Route exact path="/" component={Home}/>
            <Route path="/active" component={List}/>
            <Route path="/inactive" component={List}/>
            <Route path="/expire" component={List}/>
            <Route path="/delete" component={List}/>
            <Route component={NoMatch}/>
          </Switch>
        </HashRouter>
      </div>
    );
  };
} 

export default Main;

импорт этого css (который я могу вывести на консоль, как показано в блоке кода выше):

.container {
  border: 1px solid #D0D0D0;
  -moz-box-shadow: 0 0 8px #D0D0D0;
  box-shadow: 0 0 8px #D0D0D0;
  overflow: hidden;
  height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.header {
  color: #444;
  background-color: transparent;
  border-bottom: 1px solid #D0D0D0;
  font-size: 1.2em;
  height: 65px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  padding: 15px 20px;
}

моя конфигурация webpack. как следует:

module.exports = {
  entry: [
    './src/index.js'
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/,
        loader: 'css-loader',
        options: {
          minimize: true,
          camelCase: 'dashes',
          modules: true,
          localIdentName: '[name]__[local]___[hash:base64:5]'
        }
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx', '.css']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  }
};

webpack reactjs css-loader
person SaminOz    schedule 21.06.2018    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Ладно - так что все заработало следующим образом. Последним шагом было включение style-loader, а также css-loader. Я читал еще, где это не требовалось с модулями, установленными на true, поэтому придется провести дальнейшие исследования.

Я думаю, что кто-то с более глубокими знаниями (или я, когда я разберусь дальше) сможет связать здесь некоторые нерешенные вопросы, но это сработает, если у вас возникнут те же проблемы, что и у меня.

Я окружил свои классы css с помощью: local (myclass) {/ здесь немного css /}, чтобы получить локальную область видимости, пока я не пойму лучше.

{
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              minimize: true,
              camelCase: 'dashes',
              modules: true,
              localIdentName: '[name]__[local]___[hash:base64:5]'
            }
          }
        ]
      }

Альтернатива, приведенная ниже, является самой простой, если вас не беспокоят варианты.

{
 use: ['style-loader', 'css-loader']
}
person SaminOz    schedule 22.06.2018