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

我还将我的 App 组件包装在 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 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" },
       ]
   },