React-Toolbox如何正确包含样式 [英] React-toolbox how to include the styles correctly

问题描述

我正在尝试使用 react-toolbox 中的日期选择器.

I am trying to use the date picker from react-toolbox.

这是我的webpack配置:

Here is my webpack config:

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

我在resolve部分中有.scss:

I have .scss in the resolve section:

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

我还将我的App组件包装在ToolboxAPP

I have also wrapped my App component within ToolboxAPP

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

渲染组件时，外观如下:

When I rendered the component, here is what it looks like:

从图像中您可以看到该组件未设置样式，并且相应的CSS类名称未定义.

You can see from the image that the component is not styled, and the corresponding css class names are undefined.

有人知道我做错了吗?

推荐答案

您需要包含modules(不幸的是，这可能会破坏不使用模块的任何其他样式).

You need to include modules (which unfortunately may break any other styling not using modules).

请参见 https://github.com/react-toolbox/react-toolbox/issues/121 了解更多信息.

这是您需要在Webpack加载程序中使用的行:

This is the line you will need to utilize in your webpack loader:

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

这篇关于React-Toolbox如何正确包含样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！