jQuery lib(fancybox)样式找不到，在reactjs中导入css导致错误。

Question

我已经安装了jquert lib FancyBox。npm install @fancyapps/fancybox --save 并遵循官方文档。

但这些规则并不适用于花式盒子的dom-elements。

如何应用fancybox的样式，因为如果我不把min.css导入到我的模块中，它就会运行，但样式根本没有应用（见图片），点击预览后，fancybox会打开页脚下的图片。

import React from "react";
import fancybox from '@fancyapps/fancybox';

正如你所看到的，没有应用任何css

在另一种情况下，我在我的组件中添加了import min.css，但它崩溃了。

import React from "react";
import '@fancyapps/fancybox/dist/jquery.fancybox.min.css';
import fancybox from '@fancyapps/fancybox';

下次再错

_form_processor.js:5959 Uncaught Error: Module parse failed: Unexpected token (1:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(see pic) 

我的自定义webpack配置。

module.exports = {
  module: {
    rules: [
      {
        test: /\.js(x?)$/,
        exclude: /node_modules/,
        use: { loader: "babel-loader" }
      }
    ]
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  entry: {
    "_form_processor": "./src/index.js"
  }
};

Answer 1

答案是 有助于 稍加改动 .babelrc 包含下一个

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["@babel/plugin-proposal-class-properties"]
}

我需要用npm安装 风格加载器 只，并将其添加到我的webpack配置中我现在的成为。

```module.exports = {
  module: {
    rules: [
      {
        test: /\.js(x?)$/,
        exclude: /node_modules/,
        use: { loader: "babel-loader" }
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      }
    ]
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  entry: {
    "_form_processor": "./src/index.js"
  }
};

这样一来，css导入就能正常工作了

import React from "react";
import fancybox from '@fancyapps/fancybox';
import '@fancyapps/fancybox/dist/jquery.fancybox.min.css';

我想这样的配置必须应用于每一个用webpack导入的jquery类库。