webpack打包组件库中如何支持import ".css"?

Question

webpack 中loader配置如下：

        output: {
            ...options.output,
            path: path.resolve(__dirname, "../dist"),
            library: pkg.name,
            libraryTarget: "commonjs2", // Important
            umdNamedDefine: true // Important
        },
        
        ....
        ....
{
                test: /\.(css)$/,
                exclude: path.resolve(__dirname, "node_modules"),
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                    },
                    "postcss-loader"
                ],
            },

package.json

{

    "dependencies": {
        "@ant-design/compatible": "^1.0.2",
        "@ant-design/icons": "^4.2.1",
        "@babel/preset-react": "^7.0.0",
        "@loadable/component": "^5.12.0",
        "@types/loadable__component": "^5.13.1",
        "@types/node": "^14.0.6",
        "@types/react": "*",
        "@types/react-dom": "*",
        "@types/styled-components": "^5.1.4",
        "antd": "^4.3.1",
        "babel-plugin-import": "^1.12.2",
        "braft-editor": "^2.3.9",
        "es6-promise": "^4.2.8",
        "history": "^4.10.1",
        "js-export-excel": "^1.1.2",
        "memoize-one": "^5.1.1",
        "mobx": "^5.15.4",
        "mobx-react-devtools": "^6.1.1",
        "mobx-react-lite": "^2.0.7",
        "moment": "^2.27.0",
        "postcss-loader": "^3.0.0",
        "postcss-nested": "^5.0.3",
        "postcss-simple-vars": "^6.0.3",
        "react": "^16.13.1",
        "react-color": "^2.18.1",
        "react-dom": "^16.13.1",
        "react-quill": "^1.3.5",
        "react-rnd": "^10.2.4"
    },
    "peerDependencies": {
        "mobx": "5.15.4",
        "mobx-react-lite": "2.0.7",
        "react": "^16.8.2",
        "react-dom": "^16.8.0"
    },
    "resolutions": {
        "@types/react": "16.9.2"
    },
    "devDependencies": {
        "@ant-design/tools": "^8.0.4",
        "@babel/core": "^7.5.5",
        "@babel/plugin-proposal-class-properties": "^7.10.1",
        "@babel/plugin-proposal-decorators": "^7.10.1",
        "@babel/plugin-proposal-function-bind": "^7.2.0",
        "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
        "@babel/plugin-transform-arrow-functions": "^7.2.0",
        "@babel/plugin-transform-runtime": "^7.5.5",
        "@babel/preset-env": "^7.5.5",
        "@babel/preset-stage-0": "^7.0.0",
        "@babel/preset-stage-1": "^7.0.0",
        "@babel/preset-typescript": "^7.10.1",
        "@ezbuy/tslint-config-ezbuy": "^1.2.2",
        "@types/webpack": "^4.39.0",
        "@webpack-cli/init": "^0.2.2",
        "babel-eslint": "^8.2.2",
        "babel-loader": "^8.1.0",
        "babel-plugin-add-module-exports": "^0.2.1",
        "babel-plugin-syntax-dynamic-import": "^6.18.0",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-plugin-transform-decorators-legacy": "^1.3.4",
        "babel-plugin-transform-object-assign": "^6.22.0",
        "cache-loader": "^4.1.0",
        "clean-webpack-plugin": "^3.0.0",
        "copy-webpack-plugin": "^6.0.2",
        "css-loader": "^3.2.0",
        "eslint": "^6.2.2",
        "eslint-config-airbnb": "^18.0.1",
        "eslint-config-prettier": "^6.1.0",
        "eslint-plugin-babel": "^5.3.0",
        "extract-loader": "^5.1.0",
        "file-loader": "^6.0.0",
        "fork-ts-checker-webpack-plugin": "^1.5.0",
        "fs": "^0.0.1-security",
        "fs-extra": "^9.0.0",
        "happypack": "^5.0.1",
        "html-webpack-plugin": "^3.2.0",
        "immutability-helper": "^3.1.1",
        "less": "^3.10.3",
        "less-loader": "^5.0.0",
        "mini-css-extract-plugin": "^0.9.0",
        "node-sass": "^4.14.1",
        "path": "^0.12.7",
        "prettier": "^1.18.2",
        "protoc-gen-json-ts": "^1.1.1",
        "react-dnd": "^7.1.0",
        "react-dnd-html5-backend": "^7.1.0",
        "react-hot-loader": "^4.12.21",
        "sass-loader": "^8.0.2",
        "style-loader": "^1.0.0",
        "styled-components": "^5.1.1",
        "ts-loader": "^6.0.4",
        "ts-node": "^8.3.0",
        "typescript": "^3.5.3",
        "typings-for-css-modules-loader": "^1.7.0",
        "webpack": "^4.28.4",
        "webpack-bundle-analyzer": "^3.0.4",
        "webpack-cli": "^3.3.11",
        "webpack-dev-middleware": "^3.6.1",
        "webpack-dev-server": "^3.8.0",
        "webpack-hot-middleware": "^2.24.3",
        "webpack-manifest-plugin": "^2.2.0",
        "webpack-merge": "^4.2.2"
    }
}

问题描述：

在项目A中引用项目B作为组件库，但项目B不支持 import “*.css”。

在项目B dev 环境（localhost）可以直接解析css文件，不知道作为组件库，为什么就不可以了。

Answer 1

把 exclude: path.resolve(__dirname, "node_modules"), 去掉，你都排除了 node_module 自然应用不了 css-loader 啦...