React-toolbox как правильно включить стили

Question

Я пытаюсь использовать средство выбора даты от react-toolbox.

Вот мой WebPack конфигурации:

{ 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract('style-loader', 'css-loader!cssnext-loader') 
    },{ 
     test: /\.scss$/, 
     loaders: ['style', 'css', 'sass'] 
    } 

У меня есть .scss в resolve разделе:

resolve: { 
    extensions: ['', '.js', '.jsx', '.scss'] 
}, 

Я также обернуты мой компонент App в ToolboxAPP

ReactDOM.render(
    <ToolboxApp> 
     <Provider store={store}> 
      <App /> 
     </Provider> 
    </ToolboxApp> 
, document.getElementById('root')) 

Когда Я отобразил компонент, вот как он выглядит:

Вы можете видеть на картинке, что компонент не стиль, а соответствующие имена классов CSS не определены.

Кто-нибудь знает, что я сделал не так?

Answer 1

Это похоже на проблему конфигурации Webpack. Это на самом деле странно, потому что если webpack не может импортировать стили, он должен вызывать ошибку импорта вместо разрешения пустого объекта. Поскольку мы не можем видеть весь файл конфигурации, я хотел бы спросить вас, если вы уже проверили рабочий примерный репозиторий: https://github.com/react-toolbox/react-toolbox-example

Существует пример конфигурации Webpack, надеюсь, что это поможет!

Answer 2

Вам необходимо включить modules (который, к сожалению, может сломать любой другой стиль, не используя модули).

См. https://github.com/react-toolbox/react-toolbox/issues/121 для получения дополнительной информации.

Это линия вам нужно будет использовать в вашем WebPack погрузчик:

require.resolve('css-loader') + '?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 

Answer 3

его ясно, что WebPack не видит CSS/SCSS файлы, у вас есть какие-либо ошибки, если вы посмотрите на что вы найдет проблему.

1. проблема может быть, что вам нужно установить Css-погрузчик и Sass погрузчик

   npm install css-loader --save-dev 
   npm install sass-loader node-sass webpack --save-dev 
   

2. , если вы сделали это попытаться решить

   resolve: {extensions: ['', '.jsx', '.scss', '.js', '.json'], 
       modulesDirectories: [ 
        'node_modules', 
        ${process.cwd()}/node_modules 
       ] 
   }, 
   

3. module: { 
       loaders: [ 
        { 
         test: /(\.js|\.jsx)$/, 
         exclude: /(node_modules)/, 
         loader: 'babel', 
        }, { 
         test: /(\.scss|\.css)$/, 
         loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass'), 
        }, 
        { test: /\.png$/, loader: "url-loader?limit=100000" }, 
        { test: /\.jpg$/, loader: "file-loader" }, 
       ] 
   },