已发布的npm软件包不适用于样式

Question

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

这是package的存储库。我使用单独的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中的“网络和控制台”选项卡上没有错误。我也找不到加载的文件，即使它在软件包中也是如此。似乎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？而且，如果我可以通过这种方式来交付CSS文件，而无需其他人更改其Webpack配置。

Answer 1

查看您的仓库，我看到您正在导入scss，但是将其属性归于classNames。

className应该是类的名称，您可以将导入的样式归因于style，也可以使用<link rel="stylesheet" type="text/css" href="styles.min.css">

将已编译的CSS加载到DOM中。

在“网络”标签中看不到样式表的原因是因为您只是忘记了声明样式表。