在新的CRA中使用babel转换软件包后，CSS和图像文件不可用 [英] CSS and Images files not coming after transpiling package with babel in new CRA

问题描述

我正在将CSS导入为import'./style.css';和具有背景URL属性的CSS中的图像.我想要的是制作一个程序包，将其发布到npm而不进行构建，然后将其安装到新的CRA中并在其中使用. 在反应中使用自制的npm软件包.编译失败.从这里我知道现在要使用该已安装的软件包，必须对其进行编译.但是问题是我的js/jsx已从ES6转换为ES5，但是图像和CSS没有进入新的已转换文件夹.

I am importing CSS as import './style.css'; and images in CSS with background URL property. What I want is to make a package, publish it to npm without building and then install it into a new CRA and use it there. Using self made npm package in react. Failed to compile. From here I got to know that to use that installed package now I have to transpile it. But the issue is my js/jsx are getting transpiled from ES6 to ES5 but the images and CSS aren't coming into the new transpiled folder.

详细信息 我在Reactjs中制作了一个程序包，但在发布源代码后无法使用它，而不是通过进行构建. 然后我在上面发布了一个问题:

DETAILS I made a package in Reactjs and was not able to use it after publishing the source, not by making the build. Then I posted a question on it: Using self made npm package in react. Failed to compile.

现在我可以按照接受的答案中的步骤使用它，即使用babel编译./src.

Now I am able to use it by following the steps in the accepted answer i.e. by transpiling ./src using babel.

我仍然遇到的问题是我没有在新的已编译位置(即./lib/src)中获取CSS和图像.如果我将所有图像和CSS文件夹复制到./lib/src中的相应位置.它可以工作，但我不想手动进行.

The issue on which I am still stuck is that I don't get my CSS and images in the new transpiled location i.e. ./lib/src. If I copy all the images and CSS folders in the respective places in ./lib/src. It works but I don't want to do it manually.

有关如何实现此目标的任何建议.

Any suggestions on how to achieve this.

WEBPACK.CONFIG.JS

WEBPACK.CONFIG.JS

module.exports = {
  overrides: [
    {
      test: ["./node_modules/<component_name>"],
      presets: ["@babel/preset-env", "@babel/preset-react"],
      plugins: ["@babel/plugin-proposal-class-properties"]
    }
  ]
};

PACKAGE.json

PACKAGE.json

{
  "name": "package-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@babel/preset-react": "^7.8.3",
    "@material-ui/core": "^1.5.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "active-event-stack": "^1.0.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-webpack-loaders": "^0.9.0",
    "classnames": "^2.2.3",
    "css-loader": "^3.4.2",
    "file-loader": "^5.0.2",
    "material-ui": "^0.20.0",
    "path": "^0.12.7",
    "prop-types": "^15.6.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-draggable": "^2.2.6",
    "react-onclickoutside": "^5.10.0",
    "react-redux": "^7.1.3",
    "react-resizable": "^1.7.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "redux": "^3.7.2",
    "style-loader": "^1.1.3",
    "styled-components": "^4.3.2",
    "url-loader": "^3.0.0",
    "wolfy87-eventemitter": "^5.2.9"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4"
  }
}

推荐答案

您应使用文件-loader 加载图像文件，并 css-loader 加载您的图像文件css文件.

You should use file-loader to load image files and css-loader to load your css files.

您的Webpack将随后知道如何处理文件

Your webpack will then know how to deal with your files

如果您使用create-react-app创建了项目.在这种情况下，您只需要将CSS文件和图像文件导入到组件中即可.

If you have created your project with create-react-app. In that case, you just need to import your CSS file and image file to your components.

这篇关于在新的CRA中使用babel转换软件包后，CSS和图像文件不可用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！