在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ antdesign 配置css模塊化無效,為什么?

antdesign 配置css模塊化無效,為什么?

package.json里的內(nèi)容:

{
  "name": "fake",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd": "^3.8.0",
    "axios": "^0.18.0",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "babel-plugin-import": "^1.8.0",
    "css-loader": "^1.0.0",
    "react-app-rewired": "^1.5.2",
    "style-loader": "^0.22.1"
  }
}

webpack.config.dev.js里的內(nèi)容:

{
    test: /\.css$/,
        exclude: /(node_modules)/,
            use: [
                require.resolve('style-loader'),
                {
                    loader: require.resolve('css-loader'),
                    options: {
                        importLoaders: 1,
                        modules: true,
                        localIdentName: "[name]__[local]___[hash:base64:5]"
                    },
                },
                {
                    loader: require.resolve('postcss-loader'),
                    options: {
                        // Necessary for external CSS imports to work
                        // https://github.com/facebookincubator/create-react-app/issues/2677
                        ident: 'postcss',
                        plugins: () => [
                            require('postcss-flexbugs-fixes'),
                            autoprefixer({
                                browsers: [
                                    '>1%',
                                    'last 4 versions',
                                    'Firefox ESR',
                                    'not ie < 9', // React doesn't support IE8 anyway
                                ],
                                flexbox: 'no-2009',
                            }),
                        ],
                    },
                },
            ],
},
    {
        test: /\.css$/,
            exclude: /(src)/,
                use: [
                    require.resolve('style-loader'),
                    {
                        loader: require.resolve('css-loader'),
                        options: {
                            importLoaders: 1
                        },
                    },
                    {
                        loader: require.resolve('postcss-loader'),
                        options: {
                            // Necessary for external CSS imports to work
                            // https://github.com/facebookincubator/create-react-app/issues/2677
                            ident: 'postcss',
                            plugins: () => [
                                require('postcss-flexbugs-fixes'),
                                autoprefixer({
                                    browsers: [
                                        '>1%',
                                        'last 4 versions',
                                        'Firefox ESR',
                                        'not ie < 9', // React doesn't support IE8 anyway
                                    ],
                                    flexbox: 'no-2009',
                                }),
                            ],
                        },
                    },
                ],
    }

webpack.config.prod.js里的內(nèi)容:

{
    test: /\.css$/,
        exclude: [/node_modules/],
            loader: ExtractTextPlugin.extract(
                Object.assign(
                    {
                        fallback: {
                            loader: require.resolve('style-loader'),
                            options: {
                                hmr: false
                            },
                        },
                        use: [
                            {
                                loader: require.resolve('css-loader'),
                                options: {
                                    importLoaders: 1,
                                    modules: true,
                                    minimize: true,
                                    sourceMap: shouldUseSourceMap
                                },
                            },
                            {
                                loader: require.resolve('postcss-loader'),
                                options: {
                                    // Necessary for external CSS imports to work
                                    // https://github.com/facebookincubator/create-react-app/issues/2677
                                    ident: 'postcss',
                                    plugins: () => [
                                        require('postcss-flexbugs-fixes'),
                                        autoprefixer({
                                            browsers: [
                                                '>1%',
                                                'last 4 versions',
                                                'Firefox ESR',
                                                'not ie < 9', // React doesn't support IE8 anyway
                                            ],
                                            flexbox: 'no-2009',
                                        }),
                                    ],
                                },
                            },
                        ],
                    },
                    extractTextPluginOptions
                )
            ),
                // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
}, {
    test: /\.css$/,
        exclude: [/src/],
            loader: ExtractTextPlugin.extract(
                Object.assign(
                    {
                        fallback: {
                            loader: require.resolve('style-loader'),
                            options: {
                                hmr: false
                            },
                        },
                        use: [
                            {
                                loader: require.resolve('css-loader'),
                                options: {
                                    importLoaders: 1,
                                    minimize: true,
                                    sourceMap: shouldUseSourceMap,
                                },
                            },
                            {
                                loader: require.resolve('postcss-loader'),
                                options: {
                                    // Necessary for external CSS imports to work
                                    // https://github.com/facebookincubator/create-react-app/issues/2677
                                    ident: 'postcss',
                                    plugins: () => [
                                        require('postcss-flexbugs-fixes'),
                                        autoprefixer({
                                            browsers: [
                                                '>1%',
                                                'last 4 versions',
                                                'Firefox ESR',
                                                'not ie < 9', // React doesn't support IE8 anyway
                                            ],
                                            flexbox: 'no-2009',
                                        }),
                                    ],
                                },
                            },
                        ],
                    },
                    extractTextPluginOptions
                )
            ),
                // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},

style.css里面:

.test{
    background:red
}

test.js里面:

import style from '../../css/style.css';
console.log(style);//空的對(duì)象

<div className={style.test}/>//沒有class名
回答
編輯回答
毀與悔

找到問題了,使用antd創(chuàng)建的項(xiàng)目生成的是webpack3.x,但是生成的css-module要求是webpack4.x,太坑了

2018年2月3日 23:25
編輯回答
薄荷綠

首先 antd 沒法使用 css module, 因?yàn)?css module 需要 js 端配合. 其次如果你要對(duì) antd 的 css 做預(yù)處理, 你通過 exclude: /(node_modules)/ 會(huì)把a(bǔ)ntd排除掉, 改成這樣子即可:

exclude: function(modulePath) {
    return /node_modules/.test(modulePath) &&
        !/node_modules\/antd/.test(modulePath);
  }
2017年1月2日 13:09