javascript - 发布的 npm 包不应用样式

Question

我目前正在努力创建一个 npm package .这基本上是一个使用 SCSS 添加样式的 React 组件。当我测试它时，类名在那里，但没有应用任何样式。

这是 package 的 repo 协议(protocol).我使用单独的 webpack 配置来构建组件所在的特定文件夹。

这是我正在使用的 webpack 配置:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const EsLintFormatter = require('eslint-formatter-pretty');
const path = require('path');

const pkg = require('../../package.json');
const { SRC_PATH, BUILD_PATH } = require('./constants');
const setStyleLoaders = require('./style-loaders');
const alias = require('./alias');

const packageName = pkg.name;

module.exports = ({ NODE_ENV }) => ({
  mode: 'production',
  entry: `${SRC_PATH}/components/Carousel/Carousel.js`,
  output: {
    path: BUILD_PATH,
    filename: 'index.js',
    library: packageName,
    libraryTarget: 'commonjs2',
    umdNamedDefine: true,
    publicPath: '/build/',
  },
  node: {
    net: 'empty',
    tls: 'empty',
    dns: 'empty',
  },
  resolve: {
    alias: {
      ...alias,
      react: path.resolve(__dirname, './node_modules/react'),
      'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
    },
  },
  externals: {
    react: 'react',
    reactDom: 'react-dom',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: [
          { loader: 'babel-loader' },
          {
            loader: 'eslint-loader',
            options: {
              formatter: EsLintFormatter,
            },
          },
        ],
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: setStyleLoaders(NODE_ENV),
      },
      {
        test: /\.(png|pje?g|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images',
            },
          },
        ],
      },
      {
        test: /\.(woff|woff2|tff|otf|eot)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'fonts',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({ filename: 'index.css' }),
  ],
});

...这是我的 package.json

{
  "name": "react-clear-carousel",
  "version": "0.1.0-beta.1",
  "description": "A test",
  "main": "build/index.js",
  "scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --env.NODE_ENV=development --config config/webpack/webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --env.NODE_ENV=production --config config/webpack/webpack.config.publish.js",
    "stylelint": "stylelint 'src/**/*.scss' --config stylelint.config.js; exit 0",
    "eslint": "eslint 'src/**/*.js'; exit 0",
    "es:fix": "eslint 'src/**/*.js' --fix",
    "style:fix": "stylelint 'src/**/*.scss' --fix",
    "lint": "npm run eslint && npm run stylelint",
    "publish:beta": "npm publish --tag=beta",
    "test": "jest"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/RobCC/web-playground.git"
  },
  "author": "robcc",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/RobCC/web-playground/issues"
  },
  "files": [
    "dist"
  ],
  "jest": {
    "setupFilesAfterEnv": [
      "<rootDir>/config/jest/setup.js"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/jest/fileMock.js",
      "\\.(css|less|scss)$": "identity-obj-proxy",
      "^~/(.*)": "<rootDir>/$1",
      "^#/(.*)": "<rootDir>/src/$1"
    }
  },
  "homepage": "https://github.com/RobCC/web-playground#readme",
  "peerDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "prop-types": "^15.7.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-proposal-export-default-from": "^7.8.3",
    "@babel/plugin-proposal-export-namespace-from": "^7.8.3",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.1",
    "@types/jest": "^25.1.4",
    "@types/node": "^13.9.2",
    "@types/react": "^16.9.25",
    "@types/react-dom": "^16.9.5",
    "@welldone-software/why-did-you-render": "^4.0.5",
    "autoprefixer": "^9.7.4",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "chalk": "^3.0.0",
    "clean-webpack-plugin": "^3.0.0",
    "core-js": "^3.6.4",
    "cross-env": "^7.0.2",
    "css-loader": "^3.4.2",
    "cssnano": "^4.1.10",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-formatter-pretty": "^3.0.1",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.19.0",
    "eslint-plugin-react-hooks": "^2.5.1",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^3.2.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^25.1.0",
    "log-symbols": "^3.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "postcss-loader": "^3.0.0",
    "pr*op-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "regenerator-runtime": "^0.13.5",
    "sass": "^1.26.3",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "stylelint": "^13.2.1",
    "stylelint-config-recommended": "^3.0.0",
    "stylelint-formatter-pretty": "^2.0.0",
    "stylelint-scss": "^3.16.0",
    "stylelint-webpack-plugin": "^1.2.3",
    "ts-loader": "^6.2.1",
    "typescript": "^3.8.3",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "weak-key": "^1.0.2"
  }
}

这是测试发布包时的结果:

编辑 1:

devtools 中的 Network 和 Console 选项卡上没有错误。我也找不到加载的文件，即使它在包中。似乎 js 文件没有使用它，但它应该。

编辑 2:

感谢您为我指明正确的方向!

我添加了 import 'react-clear-carousel/build/index.css';从我的包中包含 CSS 文件。我现在可以看到该文件(在 devtools 上)，但自 css-loader 以来未应用样式正在对其进行模块化并添加额外的后缀和前缀(即使它已经有了)，因此具有与我的组件具有的不同的类名。

例如。 我的组件呈现为 <div class="carousel_swimlane--kXSjh"> , 但 DOM 中的样式被命名为 index_carousel_swimlane--kXSjh--2C .

我想现在的问题是，如何告诉 Webpack 按原样传递此 CSS？如果有一种方法可以让我在无需其他人更改其 Webpack 配置的情况下交付 CSS 文件。

Answer 1

查看您的存储库，我发现您正在导入您的 scss，但将其属性归因于 classNames。

className应该是类的名称，您可以将导入的样式归因于 style或者您可以使用 <link rel="stylesheet" type="text/css" href="styles.min.css"> 将已编译的 css 加载到 DOM 中

您在网络选项卡中看不到样式表的原因是您只是忘记声明样式表。