React-toolbox如何正确包含样式

Question

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

这是我的webpack配置：

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

我在resolve部分有.scss：

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。

这是您需要在您的webpack加载器中使用的代码行：

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加载程序

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

• 如果您已经这样做了，请尝试解决

解析：{扩展名：''，'.jsx'，'.scss'，'.js'，'.json'，modulesDirectories：'node_modules'，${process.cwd()}/node_modules }，测试模块：{：[{

• ：/(.js|.jsx)$/，exclude: /(node_modules)/，加载器：'babel'，}，{测试: /(.scss|.css)$/，加载器: ExtractTextPlugin.extract('style'，'css?sourceMap&modules&importLoaders=1&localIdentName=name__local___hash:base64:5!postcss!sass')，}，{测试: /.png$/，加载器：“url-加载器?限制=100000”}，{测试: /.jpg$/，加载器：“文件加载器”}，] }，