2

我需要使用 @nrwl/web:package 获取库的构建版本的 css 文件，我正在创建的库没有 index.html，它只是普通的 TS，但是当我尝试使用 web 进行编译时:package，CSS文件没有显示，在这个库的构建中我有：

{
    "build": {
        "builder": "@nrwl/web:package",
        "options": {
            "outputPath": "libs/data-table/dist",
            "tsConfig": "libs/data-table/tsconfig.lib.json",
            "project": "libs/data-table/package.json",
            "entryFile": "libs/data-table/src/index.tsx",
            "external": [ "react", "react-dom" ],
            "styles": [ "libs/data-table/src/lib/index.css", "libs/data-table/src/lib/responsive.scss" ],
            "webpackConfig": "libs/data-table/webpack.config.js",
            "assets": [
                {
                    "glob": "README.md",
                    "input": ".",
                    "output": "."
                }
            ]
        },
        "configurations": {
            "production": {
                "optimization": true,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "extractLicenses": true,
                "vendorChunk": false,
                "budgets": [
                    {
                        "type": "initial",
                        "maximumWarning": "2mb",
                        "maximumError": "5mb"
                    }
                ]
            }
        }
    }
}

在 webpack.config.js 我有：

const getConfig = require('@nrwl/react/plugins/babel');
const cssModuleRegex = /\.module\.css$/;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = (config) => {
  config = getConfig(config);
  
  config.module.rules.forEach((rule, idx) => {
    // Find rule tests for CSS.
    // Then make sure it excludes .module.css files.
    if (rule.test.test('foo.css')) {
      rule.exclude = rule.exclude
       ? Array.isArray(rule.exclude)
       ? [...rule.exclude, cssModuleRegex]
       : [rule.exclude, cssModuleRegex]
       : cssModuleRegex
    }
  });

  // Add new rule to handle .module.css files by using css-loader
  // with modules on.
  config.module.rules.push({
    test: /\.module\.css$/,
    use: [
      { loader: 'style-loader' },
      { loader: 'css-modules-typescript-loader' },
      {
        loader: 'css-loader',
        options: {
          modules: true,
          importLoaders: 1
        }
      }
    ]
  });
  config.module.rules.push({
    test: /\.module\.(scss|sass)$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
      },
      {
        loader: 'css-loader',
        options: {
          modules: true,
          importLoaders: 1
        }
      }
    ]
  });

  return config;
}

但由于某种原因，它似乎没有被阅读。

4

0 回答 0