Question

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

但是这些笔迹不适用于fancybox dom元素

如何应用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

答案that helped有所变化我的 .babelrc 包含下一个

Sub DisplayUserForm()

    Dim form As New warningBox
    form.message.Caption = "write your message here"
    form.Show
    Set form = Nothing

End Sub

我只需要npm安装 style-loader 并将其添加到我的webpack配置中我现在的礼物变成了：

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

因此，css导入现在效果很好

```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"
  }
};

我想这样的配置必须应用于通过webpack导入的每个jquery库

找不到jQuery lib（fancybox）样式，reactjs中导入的CSS会导致错误

1 个答案: