ant.Design样式引入不生效（真的了解css-loader如何使用）

项目引入antd样式，按照ant Design官网样式引入方式操作。 在index.css文件添加代码@import '~antd/dist/antd.css'；后，样式无法生效。

（样式为不生效）

（样式为生效）

分析了很久发现是webpack中css-loader配置了module：true导致的问题（webpack配置是从网上直接copy）。删除掉module配置后，样式正常引入。

                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                            // modules: true,
                        }
                    },
                ],
               

于是对css-loader的配置进行了一番研究，避免以后遇到同样问题：

    test: /\.css$/,
    use: [
        {
            loader: 'style-loader'
        },
        {
            loader: 'css-loader',
            options: {
                root: '/', //修改css中url指向的根目录, 默认值为/, 对于绝对路径, css-loader默认是不会对它进行处理的
                modules: false, //开启css-modules模式, 默认值为flase
                localIdentName: '[name]-[local]-[hash:base64:5]', //设置css-modules模式下local类名的命名
                minimize: false, //压缩css代码, 默认false
                camelCase: false, //导出以驼峰化命名的类名, 默认false
                import: true, //禁止或启用@import, 默认true
                url: true, //禁止或启用url, 默认true
                sourceMap: false, //禁止或启用sourceMap, 默认false
                importLoaders: 0, //在css-loader前应用的loader的数目, 默认为0
                alias: {} //起别名, 默认{}
            }
        }
    ]
}

1. css Modules用法教程：www.ruanyifeng.com/blog/2016/0…
2. css-loader配置详解：blog.csdn.net/weixin_3414…
3. css-loader：juejin.cn/post/684490…