3

我正在尝试使用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类名也没有定义。

有人知道我做错了什么吗?

4

3 回答 3

2

您需要包含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]',
于 2015-12-05T23:50:31.690 回答
0

很明显,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" },
        ]
    },
    
于 2016-01-06T06:26:31.420 回答
0

它看起来像一个 Webpack 配置问题。这实际上很奇怪,因为如果 webpack 无法导入样式,它应该引发导入错误,而不是解析空对象。由于我们看不到整个配置文件,我想问你是否已经检查了工作示例存储库:https ://github.com/react-toolbox/react-toolbox-example

有一个示例 Webpack 配置,希望对您有所帮助!

于 2015-12-01T15:57:07.760 回答