Webpack无法加载库的样式。

huangapple
go评论131阅读模式
英文:

Webpack doesn't load libraries styles

问题

我正在使用webpack和React项目，但是我安装的外部npm包（例如react-slick）的样式没有加载。很明显样式没有加载到DOM中。

这是我的webpack.config.js文件：

  1. const HtmlWebpackPlugin = require("html-webpack-plugin");
  2. const webpack = require("webpack");
  4. module.exports = {
  5.   mode: "development",
  6.   resolve: {
  7.     extensions: [".js", ".jsx"],
  8.   },
  9.   module: {
  10.     rules: [
  11.       {
  12.         test: /\.css$/i,
  13.         use: ["style-loader", "css-loader"],
  14.       },
  15.       {
  16.         test: /\.jsx?$/,
  17.         loader: "babel-loader",
  18.       },
  19.     ],
  20.   },
  21.   plugins: [
  22.     new HtmlWebpackPlugin({
  23.       template: "./src/index.html",
  24.     }),
  25.     new webpack.DefinePlugin({
  26.       "process.env": {
  27.         NODE_ENV: JSON.stringify("development"),
  28.         REACT_APP_API_URL: JSON.stringify(process.env.REACT_APP_API_URL),
  29.       },
  30.     }),
  31.   ],
  32.   devServer: {
  33.     historyApiFallback: true,
  34.   },
  35.   externals: {
  36.     // global app config object
  37.     config: JSON.stringify({
  38.       apiUrl: "http://localhost:3000",
  39.     }),
  40.   },
  41. };

我尝试在配置中添加了不同的加载器，如css-loader、style-loader和babel-loader。

英文:

`I am using webpack with a React project, and the external npm packages that I install don't get their styles loaded (e.g react-slick). It looks clearly that the styles are not loading and going into the DOM.

This is my webpack.config.js

  1. const HtmlWebpackPlugin = require("html-webpack-plugin");
  2. const webpack = require("webpack");
  4. module.exports = {
  5.   mode: "development",
  6.   resolve: {
  7.     extensions: [".js", ".jsx"],
  8.   },
  9.   module: {
  10.     rules: [
  11.       {
  12.         test: /\.css$/i,
  13.         use: ["style-loader", "css-loader"],
  14.       },
  15.       {
  16.         test: /\.jsx?$/,
  17.         loader: "babel-loader",
  18.       },
  19.     ],
  20.   },
  21.   plugins: [
  22.     new HtmlWebpackPlugin({
  23.       template: "./src/index.html",
  24.     }),
  25.     new webpack.DefinePlugin({
  26.       "process.env": {
  27.         NODE_ENV: JSON.stringify("development"),
  28.         REACT_APP_API_URL: JSON.stringify(process.env.REACT_APP_API_URL),
  29.       },
  30.     }),
  31.   ],
  32.   devServer: {
  33.     historyApiFallback: true,
  34.   },
  35.   externals: {
  36.     // global app config object
  37.     config: JSON.stringify({
  38.       apiUrl: "http://localhost:3000",
  39.     }),
  40.   },
  41. };

I tried to add different loaders in the config like: css-loader, style-loader and babel-loader`

答案1

得分: 0

react-slick库本身不带有内置的样式。根据文档所说，你应该使用slick-carousel包来安装它的样式（或者自己编写样式）。

我只需要在样式导入之前删除波浪符号（~）：

  1. import "slick-carousel/slick/slick.css"; 
  2. import "slick-carousel/slick/slick-theme.css";

我没有更改提供的webpack配置，样式按预期加载。

我使用的完整示例代码如下：

  1. import React from "react";
  2. import { createRoot } from "react-dom/client"
  3. import Slider from "react-slick";
  4. import "slick-carousel/slick/slick.css"; 
  5. import "slick-carousel/slick/slick-theme.css";
  7. const root = createRoot(document.getElementById("app"));
  9. const settings = {
  10.     dots: true,
  11.     infinite: true,
  12.     speed: 500,
  13.     slidesToShow: 1,
  14.     slidesToScroll: 1
  15.   };
  17. const SimpleSlider = () => {
  18.     return (
  19.         <div>
  20.           <h2> Single Item</h2>
  21.           <Slider {...settings}>
  22.             <div>
  23.               <h3>1</h3>
  24.             </div>
  25.             <div>
  26.               <h3>2</h3>
  27.             </div>
  28.           </Slider>
  29.         </div>
  30.       );
  31. }
  33. root.render(<SimpleSlider />);
英文:

The react-slick library doesn't come with styles built-in. As the documentation says, you should install its styles with the slick-carousel package (or write your own).

I just had to remove the tilde symbol(~) before the style imports:

  1. import &quot;slick-carousel/slick/slick.css&quot;; 
  2. import &quot;slick-carousel/slick/slick-theme.css&quot;;

I hadn't changed anything in the provided webpack configuration, and the styles were loaded as expected.

Full example that I used:

  1. import React from &quot;react&quot;;
  2. import { createRoot } from &quot;react-dom/client&quot;
  3. import Slider from &quot;react-slick&quot;;
  4. import &quot;slick-carousel/slick/slick.css&quot;; 
  5. import &quot;slick-carousel/slick/slick-theme.css&quot;;
  7. const root = createRoot(document.getElementById(&quot;app&quot;));
  9. const settings = {
  10.     dots: true,
  11.     infinite: true,
  12.     speed: 500,
  13.     slidesToShow: 1,
  14.     slidesToScroll: 1
  15.   };
  17. const SimpleSlider = () =&gt; {
  18.     return (
  19.         &lt;div&gt;
  20.           &lt;h2&gt; Single Item&lt;/h2&gt;
  21.           &lt;Slider {...settings}&gt;
  22.             &lt;div&gt;
  23.               &lt;h3&gt;1&lt;/h3&gt;
  24.             &lt;/div&gt;
  25.             &lt;div&gt;
  26.               &lt;h3&gt;2&lt;/h3&gt;
  27.             &lt;/div&gt;
  28.           &lt;/Slider&gt;
  29.         &lt;/div&gt;
  30.       );
  31. }
  33. root.render(&lt;SimpleSlider /&gt;);

huangapple
  • 本文由 发表于 2023年8月9日 00:20:51
  • 转载请务必保留本文链接：https://go.coder-hub.com/76861462.html
  • javascript
  • reactjs
  • webpack
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定