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

Question

Я пытаюсь использовать средство выбора даты по реагирующим инструментам.

Вот мой конфиг веб-пакета:

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

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

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

Я также завернул свой компонент приложения в ToolboxAPP

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

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

Из изображения видно, что компонент не стилизован, а имена соответствующих классов CSS не определены.

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

Answer 1

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

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

Это строка, которую вам нужно использовать в вашем веб-загрузчике:

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

Answer 2

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

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

Answer 3

Ясно, что webpack не видит файлы css/scss, есть ли у вас какие-либо ошибки, если вы посмотрите на это, вы найдете проблему.

1. проблема может быть в том, что вам нужно установить css-loader и sass loader

   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" },
       ]
   },