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

中包装了我的App组件

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文件，你有没有错误，如果你调查你会发现问题。

问题可能是你需要安装css-loader和sass loader

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

如果你这样做，试着解决

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

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

React-toolbox如何正确包含样式

3 个答案: