Không tìm thấy mô-đun không thể giải quyết chỉ mục css

Xin chào, tôi đang gặp sự cố với đường dẫn mà tôi vừa tạo. nó khá cơ bản

image: node:16

pipelines:
  default:
    - parallel:
        - step:
            name: Banking Front end
            caches:
              - node
            script:
              - npm install
              - npm run build
              - npm test

Nhưng tôi đang gặp lỗi này

> webpack --config webpack/webpack.config.js --env env=prod
ERROR in ./src/common/styles/injectors.css (./node_modules/css-loader/dist/cjs.js!./src/common/styles/injectors.css) 5:36-107
Module not found: Error: Can't resolve './Fonts/Rauschen/Rauschen-ARegular-Web.woff' in '/opt/atlassian/pipelines/agent/build/src/common/styles'
 @ ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/common/styles/authPage.scss 4:0-111 6:26-59
 @ ./src/common/styles/authPage.scss 8:6-155 22:17-24 26:0-125 26:0-125 27:22-29 27:33-47 27:50-64
 @ ./src/views/logOutPage.tsx 7:0-40
 @ ./src/common/router/routerContainer.tsx 29:9-41
 @ ./src/index.tsx 5:0-62 39:32-47

khi tôi chạy

npm chạy xây dựng

ở địa phương nó hoạt động như bình thường

Là vấn đề ở đâu đó trong webpack?

module.exports = {
	entry: path.resolve(__dirname, '..', '/src/index.tsx'),
	resolve: {
		extensions: ['.tsx', '.ts', '.js'],
	},
	module: {
		rules: [
			{
				test: /\.(ts|js)x?$/,
				exclude: /node_modules/,
				use: [
					{
						loader: 'babel-loader',
					},
				],
			},
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader'],
			},
			{
				test: /\.s[ac]ss$/i,
				use: [
					// Creates `style` nodes from JS strings
					"style-loader",
					// Translates CSS into CommonJS
					"css-loader",
					// Compiles Sass to CSS
					"sass-loader"
				]
			},
			{
				test: /\.(woff(2)?|eot|ttf|otf|)$/,
				type: 'asset/inline',
			},
			{
				test: /\.(png|jpe?g|gif|jp2|webp|ico|svg)$/,
				loader: 'file-loader',
				options: {
					name: '[name].[ext]',
				},
			},
		],
	},
	plugins: [
	],
	stats: 'errors-only',

module.exports = (envVars) => {
	const { env } = envVars
	const envConfig = require(`./webpack.${env}.js`)
	const config = merge(commonConfig, envConfig)
	return config
}

từ chối trách nhiệm. css-loader là gói của bên thứ ba do các thành viên cộng đồng duy trì, gói này có thể không có hỗ trợ, chính sách bảo mật hoặc giấy phép giống như gói webpack và gói này không được webpack duy trì

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

Bắt đầu

Cảnh báo

Để sử dụng css-loader, cần có webpack@5

Để bắt đầu, bạn cần cài đặt

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

npm install --save-dev css-loader

hoặc là

yarn add -D css-loader

hoặc là

pnpm add -D css-loader

Sau đó, thêm plugin vào cấu hình

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

tập tin. js

import css from "file.css";

gói web. cấu hình. js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

Và chạy

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

Nếu vì lý do này hay lý do khác, bạn cần trích xuất CSS dưới dạng tệp (i. e. không lưu trữ CSS trong mô-đun JS), bạn có thể muốn kiểm tra

Tùy chọn

module.exports = { module: { rules: [ { test: /\.css$/i, loader: "css-loader", options: { url: true, }, }, ], }, };9

Loại

type url =
  | boolean
  | {
      filter: (url: string, resourcePath: string) => boolean;
    };

Vỡ nợ.

type import =
  | boolean
  | { filter: (url: string, media: string, resourcePath: string) => boolean };

Cho phép bật/tắt xử lý các chức năng CSS

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

type import =
  | boolean
  | { filter: (url: string, media: string, resourcePath: string) => boolean };

type import =
  | boolean
  | { filter: (url: string, media: string, resourcePath: string) => boolean };

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

type import =
  | boolean
  | { filter: (url: string, media: string, resourcePath: string) => boolean };

Ví dụ độ phân giải

url(image.png) => require('./image.png')
url('image.png') => require('./image.png')
url(./image.png) => require('./image.png')
url('./image.png') => require('./image.png')
url('http://dontwritehorriblecode.com/2112.png') => require('http://dontwritehorriblecode.com/2112.png')
image-set(url('image2x.png') 1x, url('image1x.png') 2x) => require('./image1x.png') and require('./image2x.png')

Để nhập nội dung từ đường dẫn

type import =
  | boolean
  | { filter: (url: string, media: string, resourcePath: string) => boolean };

type import =
  | boolean
  | { filter: (url: string, media: string, resourcePath: string) => boolean };

url(~module/image.png) => require('module/image.png')
url('~module/image.png') => require('module/image.png')
url(~aliasDirectory/image.png) => require('otherDirectory/image.png')

yarn add -D css-loader

01

Bật/tắt giải quyết

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

gói web. cấu hình. js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

yarn add -D css-loader

03

Cho phép lọc

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

gói web. cấu hình. js

yarn add -D css-loader 06

Loại

type import =
  | boolean
  | { filter: (url: string, media: string, resourcePath: string) => boolean };

Vỡ nợ.

type import =
  | boolean
  | { filter: (url: string, media: string, resourcePath: string) => boolean };

Cho phép bật/tắt

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

Ví dụ độ phân giải

yarn add -D css-loader

Để nhập các kiểu từ đường dẫn

type import =
  | boolean
  | { filter: (url: string, media: string, resourcePath: string) => boolean };

type import =
  | boolean
  | { filter: (url: string, media: string, resourcePath: string) => boolean };

yarn add -D css-loader

yarn add -D css-loader

01

Bật/tắt giải quyết

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

gói web. cấu hình. js

yarn add -D css-loader

yarn add -D css-loader

03

yarn add -D css-loader

18

Loại

yarn add -D css-loader

Vỡ nợ.

yarn add -D css-loader

Cho phép lọc

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

gói web. cấu hình. js

yarn add -D css-loader 22

Loại

yarn add -D css-loader

Vỡ nợ.

yarn add -D css-loader

Cho phép bật/tắt Mô-đun CSS hoặc ICSS và cấu hình thiết lập

• yarn add -D css-loader
  

  19 - kích hoạt các mô-đun CSS cho tất cả các tệp phù hợp với biểu thức chính quy

  yarn add -D css-loader
  

  25 và

  yarn add -D css-loader
  

  26

• type import =
    | boolean
    | { filter: (url: string, media: string, resourcePath: string) => boolean };

  0 - kích hoạt các mô-đun CSS cho tất cả các tệp

• type import =
    | boolean
    | { filter: (url: string, media: string, resourcePath: string) => boolean };

  3 - vô hiệu hóa Mô-đun CSS cho tất cả các tệp

• yarn add -D css-loader
  

  29 - vô hiệu hóa Mô-đun CSS cho tất cả các tệp và đặt tùy chọn

  yarn add -D css-loader
  

  30, bạn có thể đọc thêm thông tin

• yarn add -D css-loader
  

  03 - bật các mô-đun CSS cho tất cả các tệp, nếu tùy chọn

  yarn add -D css-loader
  

  32 không được chỉ định, nếu không, tùy chọn

  yarn add -D css-loader
  

  32 sẽ xác định xem đó có phải là mô-đun CSS hay không, bạn có thể đọc thêm thông tin

Tùy chọn

yarn add -D css-loader

Sử dụng giá trị

type import =
  | boolean
  | { filter: (url: string, media: string, resourcePath: string) => boolean };

gói web. cấu hình. js

yarn add -D css-loader

yarn add -D css-loader

36

yarn add -D css-loader

37

Sử dụng giá trị

yarn add -D css-loader

yarn add -D css-loader

yarn add -D css-loader

yarn add -D css-loader

yarn add -D css-loader

Bạn có thể tìm thêm thông tin ở đây

Các kiểu có thể được xác định phạm vi cục bộ để tránh các kiểu có phạm vi toàn cầu

Cú pháp

yarn add -D css-loader

yarn add -D css-loader

Với chế độ cục bộ

yarn add -D css-loader

yarn add -D css-loader

yarn add -D css-loader

Trình tải thay thế các bộ chọn cục bộ bằng các mã định danh duy nhất. Các mã định danh duy nhất đã chọn được xuất bởi mô-đun

yarn add -D css-loader

Ghi chú

Số nhận dạng được xuất

yarn add -D css-loader

CamelCase được khuyến nghị cho bộ chọn cục bộ. Chúng dễ sử dụng hơn trong mô-đun JS đã nhập

Bạn có thể sử dụng

yarn add -D css-loader

yarn add -D css-loader

49

Khi khai báo một tên lớp cục bộ, bạn có thể soạn một lớp cục bộ từ một tên lớp cục bộ khác

yarn add -D css-loader

Điều này không dẫn đến bất kỳ thay đổi nào đối với CSS nhưng xuất nhiều tên lớp

pnpm add -D css-loader

yarn add -D css-loader

50

Để nhập một tên lớp cục bộ từ một mô-đun khác

Ghi chú

Chúng tôi thực sự khuyên bạn nên chỉ định phần mở rộng khi nhập tệp, vì có thể nhập tệp có bất kỳ phần mở rộng nào và không biết trước nên sử dụng tệp nào

pnpm add -D css-loader

Để nhập từ nhiều mô-đun, hãy sử dụng nhiều quy tắc

yarn add -D css-loader

pnpm add -D css-loader

yarn add -D css-loader

52

Bạn có thể sử dụng

yarn add -D css-loader

Chúng tôi khuyên bạn nên sử dụng tiền tố

yarn add -D css-loader

yarn add -D css-loader

yarn add -D css-loader

pnpm add -D css-loader

yarn add -D css-loader

01

Bật các tính năng của Mô-đun CSS

gói web. cấu hình. js

yarn add -D css-loader

yarn add -D css-loader

29

Kích hoạt các tính năng và thiết lập Mô-đun CSS

yarn add -D css-loader

gói web. cấu hình. js

yarn add -D css-loader

03

Bật các tính năng và tùy chọn thiết lập của Mô-đun CSS cho chúng

gói web. cấu hình. js

pnpm add -D css-loader

yarn add -D css-loader

61

Loại

pnpm add -D css-loader

Vỡ nợ.

yarn add -D css-loader

Cho phép tự động kích hoạt các mô-đun CSS/ICSS dựa trên tên tệp khi tùy chọn

yarn add -D css-loader

Những giá trị khả thi

• yarn add -D css-loader
  

  19 - kích hoạt các mô-đun CSS cho tất cả các tệp

• type import =
    | boolean
    | { filter: (url: string, media: string, resourcePath: string) => boolean };

  0 - kích hoạt các mô-đun CSS cho tất cả các tệp phù hợp với biểu thức chính quy

  yarn add -D css-loader
  

  25 và

  yarn add -D css-loader
  

  26

• type import =
    | boolean
    | { filter: (url: string, media: string, resourcePath: string) => boolean };

  3 - vô hiệu hóa Mô-đun CSS

• yarn add -D css-loader
  

  69 - kích hoạt các mô-đun CSS cho tất cả các tệp phù hợp với regexp

  yarn add -D css-loader
  

  70

• yarn add -D css-loader
  

  71 - bật Mô-đun CSS cho các tệp dựa trên tên tệp đáp ứng kiểm tra chức năng bộ lọc của bạn

yarn add -D css-loader

Những giá trị khả thi

• type import =
    | boolean
    | { filter: (url: string, media: string, resourcePath: string) => boolean };

  0 - bật các mô-đun CSS hoặc định dạng CSS có thể tương tác, đặt tùy chọn thành giá trị

  yarn add -D css-loader
  

  38 cho tất cả các tệp thỏa mãn điều kiện

  yarn add -D css-loader
  

  76 hoặc đặt tùy chọn thành giá trị

  yarn add -D css-loader
  

  78 cho tất cả các tệp thỏa mãn điều kiện

  yarn add -D css-loader
  

  26

• type import =
    | boolean
    | { filter: (url: string, media: string, resourcePath: string) => boolean };

  3 - vô hiệu hóa các mô-đun CSS hoặc định dạng CSS có thể tương tác dựa trên tên tệp

gói web. cấu hình. js

pnpm add -D css-loader

Kích hoạt các mô-đun CSS cho các tệp dựa trên tên tệp đáp ứng kiểm tra regex của bạn

gói web. cấu hình. js

import css from "file.css";

Kích hoạt các mô-đun CSS cho các tệp dựa trên tên tệp đáp ứng kiểm tra chức năng bộ lọc của bạn

gói web. cấu hình. js

import css from "file.css";

yarn add -D css-loader

30

Loại

import css from "file.css";

Vỡ nợ.

yarn add -D css-loader

Thiết lập tùy chọn

yarn add -D css-loader

yarn add -D css-loader

Kiểm soát mức độ biên dịch được áp dụng cho các kiểu đầu vào

Các giá trị

yarn add -D css-loader

yarn add -D css-loader

yarn add -D css-loader

yarn add -D css-loader

yarn add -D css-loader

yarn add -D css-loader

yarn add -D css-loader

yarn add -D css-loader

yarn add -D css-loader

yarn add -D css-loader

ICSS củng cố hỗ trợ Mô-đun CSS và cung cấp cú pháp cấp thấp cho các công cụ khác để triển khai các biến thể mô-đun CSS của riêng chúng

yarn add -D css-loader

Các giá trị có thể -

yarn add -D css-loader

yarn add -D css-loader

yarn add -D css-loader

yarn add -D css-loader

gói web. cấu hình. js

import css from "file.css";

yarn add -D css-loader

Cho phép đặt các giá trị khác nhau cho tùy chọn

yarn add -D css-loader

Các giá trị có thể trả về -

yarn add -D css-loader

yarn add -D css-loader

yarn add -D css-loader

yarn add -D css-loader

gói web. cấu hình. js

pnpm add -D css-loader

08

Loại

import css from "file.css";

Vỡ nợ.

pnpm add -D css-loader

Cho phép định cấu hình tên nhận dạng cục bộ được tạo

Để biết thêm thông tin về các tùy chọn xem

Chuỗi mẫu được hỗ trợ

• pnpm add -D css-loader
  

  10 tên cơ sở của tài nguyên

• pnpm add -D css-loader
  

  11 thư mục tài nguyên liên quan đến tùy chọn

  pnpm add -D css-loader
  

  12 hoặc tùy chọn

  pnpm add -D css-loader
  

  13

• pnpm add -D css-loader
  

  14 đường dẫn của tài nguyên liên quan đến tùy chọn

  pnpm add -D css-loader
  

  12 hoặc tùy chọn

  pnpm add -D css-loader
  

  13

• pnpm add -D css-loader
  

  17 - tên tệp và đường dẫn

• pnpm add -D css-loader
  

  18 - phần mở rộng với đầu

  pnpm add -D css-loader
  

  19

• pnpm add -D css-loader
  

  20 - hàm băm của chuỗi, được tạo dựa trên

  pnpm add -D css-loader
  

  21,

  pnpm add -D css-loader
  

  22,

  pnpm add -D css-loader
  

  23,

  pnpm add -D css-loader
  

  24,

  pnpm add -D css-loader
  

  25,

  pnpm add -D css-loader
  

  26 và

  pnpm add -D css-loader
  

  27

• pnpm add -D css-loader
  

  28 - hàm băm với cài đặt hàm băm

• pnpm add -D css-loader
  

  29 - lớp ban đầu

khuyến nghị

• sử dụng

  pnpm add -D css-loader
  

  30 để phát triển
• sử dụng

  pnpm add -D css-loader
  

  09 để sản xuất

Trình giữ chỗ

pnpm add -D css-loader

Ghi chú. tất cả các ký tự dành riêng (_______11_______33) và ký tự hệ thống tệp điều khiển (không bao gồm các ký tự trong trình giữ chỗ

pnpm add -D css-loader

pnpm add -D css-loader

gói web. cấu hình. js

import css from "file.css";

pnpm add -D css-loader

25

Loại

import css from "file.css";

Vỡ nợ.

pnpm add -D css-loader

Cho phép xác định lại bối cảnh trình tải cơ bản cho tên nhận dạng cục bộ

gói web. cấu hình. js

import css from "file.css";

pnpm add -D css-loader

21

Loại

import css from "file.css";

Vỡ nợ.

yarn add -D css-loader

Cho phép thêm hàm băm tùy chỉnh để tạo các lớp độc đáo hơn. Để biết thêm thông tin xem

gói web. cấu hình. js

import css from "file.css";

pnpm add -D css-loader

22

Loại

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

Vỡ nợ.

pnpm add -D css-loader

Cho phép chỉ định hàm băm để tạo các lớp. Để biết thêm thông tin xem

gói web. cấu hình. js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

pnpm add -D css-loader

23

Loại

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

Vỡ nợ.

pnpm add -D css-loader

Cho phép chỉ định thông báo băm để tạo các lớp. Để biết thêm thông tin xem

gói web. cấu hình. js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

pnpm add -D css-loader

24

Loại

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

Vỡ nợ.

pnpm add -D css-loader

Cho phép chỉ định độ dài thông báo băm để tạo các lớp. Để biết thêm thông tin xem

gói web. cấu hình. js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

pnpm add -D css-loader

46

Loại.

pnpm add -D css-loader

pnpm add -D css-loader

Có nên sử dụng tên cục bộ khi tính toán hàm băm

• pnpm add -D css-loader
  

  48 Cả đường dẫn tài nguyên và tên cục bộ đều được sử dụng khi băm. Mỗi mã định danh trong một mô-đun luôn có thông báo băm riêng

• pnpm add -D css-loader
  

  50 Tự động phát hiện nếu có thể bỏ qua tên định danh khỏi hàm băm. Sử dụng giá trị này để tối ưu hóa đầu ra để nén GZIP hoặc Brotli tốt hơn

gói web. cấu hình. js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

pnpm add -D css-loader

51

Loại

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

Vỡ nợ.

yarn add -D css-loader

gói web. cấu hình. js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

pnpm add -D css-loader

53

Loại

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

Vỡ nợ.

yarn add -D css-loader

Cho phép chỉ định một chức năng để tạo tên lớp. Theo mặc định, chúng tôi sử dụng chức năng tích hợp để tạo tên lớp. Nếu hàm tùy chỉnh trả về

pnpm add -D css-loader

yarn add -D css-loader

gói web. cấu hình. js

type url =
  | boolean
  | {
      filter: (url: string, resourcePath: string) => boolean;
    };

pnpm add -D css-loader

57

Loại

type url =
  | boolean
  | {
      filter: (url: string, resourcePath: string) => boolean;
    };

Vỡ nợ.

type import =
  | boolean
  | { filter: (url: string, media: string, resourcePath: string) => boolean };

Bật/tắt các mô-đun ES có tên xuất khẩu cho người dân địa phương

Cảnh báo

Tên của người dân địa phương được chuyển thành chữ thường, tôi. e. tùy chọn

pnpm add -D css-loader

59 có giá trị

pnpm add -D css-loader

60 theo mặc định

Cảnh báo

Không được phép sử dụng các từ dành riêng cho JavaScript trong tên lớp css

phong cách. css

type url =
  | boolean
  | {
      filter: (url: string, resourcePath: string) => boolean;
    };

mục lục. js

type url =
  | boolean
  | {
      filter: (url: string, resourcePath: string) => boolean;
    };

Bạn có thể kích hoạt mô-đun ES có tên export bằng cách sử dụng

gói web. cấu hình. js

type url =
  | boolean
  | {
      filter: (url: string, resourcePath: string) => boolean;
    };

Để đặt tên tùy chỉnh cho tênExport, có thể sử dụng tùy chọn làm chức năng. Ví dụ dưới đây trong phần

pnpm add -D css-loader

63

Loại

type url =
  | boolean
  | {
      filter: (url: string, resourcePath: string) => boolean;
    };

Vỡ nợ.

type import =
  | boolean
  | { filter: (url: string, media: string, resourcePath: string) => boolean };

Cho phép

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

gói web. cấu hình. js

type url =
  | boolean
  | {
      filter: (url: string, resourcePath: string) => boolean;
    };

pnpm add -D css-loader

59

Loại

type url =
  | boolean
  | {
      filter: (url: string, resourcePath: string) => boolean;
    };

Vỡ nợ. dựa trên giá trị quyền chọn

pnpm add -D css-loader

type import =
  | boolean
  | { filter: (url: string, media: string, resourcePath: string) => boolean };

pnpm add -D css-loader

pnpm add -D css-loader

Kiểu tên lớp đã xuất

yarn add -D css-loader

Theo mặc định, các khóa JSON đã xuất phản ánh tên lớp (i. e giá trị

pnpm add -D css-loader

Cảnh báo

Chỉ cho phép giá trị

pnpm add -D css-loader

60 nếu bạn đặt giá trị

pnpm add -D css-loader

57 thành

type import =
  | boolean
  | { filter: (url: string, media: string, resourcePath: string) => boolean };

0

pnpm add -D css-loader

yarn add -D css-loader

pnpm add -D css-loader

yarn add -D css-loader

pnpm add -D css-loader

yarn add -D css-loader

pnpm add -D css-loader

yarn add -D css-loader

pnpm add -D css-loader

yarn add -D css-loader

tập tin. css

type url =
  | boolean
  | {
      filter: (url: string, resourcePath: string) => boolean;
    };

tập tin. js

type url =
  | boolean
  | {
      filter: (url: string, resourcePath: string) => boolean;
    };

gói web. cấu hình. js

url(image.png) => require('./image.png')
url('image.png') => require('./image.png')
url(./image.png) => require('./image.png')
url('./image.png') => require('./image.png')
url('http://dontwritehorriblecode.com/2112.png') => require('http://dontwritehorriblecode.com/2112.png')
image-set(url('image2x.png') 1x, url('image1x.png') 2x) => require('./image1x.png') and require('./image2x.png')

yarn add -D css-loader

gói web. cấu hình. js

url(image.png) => require('./image.png')
url('image.png') => require('./image.png')
url(./image.png) => require('./image.png')
url('./image.png') => require('./image.png')
url('http://dontwritehorriblecode.com/2112.png') => require('http://dontwritehorriblecode.com/2112.png')
image-set(url('image2x.png') 1x, url('image1x.png') 2x) => require('./image1x.png') and require('./image2x.png')

gói web. cấu hình. js

pnpm add -D css-loader

87

Loại

url(image.png) => require('./image.png')
url('image.png') => require('./image.png')
url(./image.png) => require('./image.png')
url('./image.png') => require('./image.png')
url('http://dontwritehorriblecode.com/2112.png') => require('http://dontwritehorriblecode.com/2112.png')
image-set(url('image2x.png') 1x, url('image1x.png') 2x) => require('./image1x.png') and require('./image2x.png')

Vỡ nợ.

type import =
  | boolean
  | { filter: (url: string, media: string, resourcePath: string) => boolean };

Chỉ xuất địa phương

Hữu ích khi bạn sử dụng các mô-đun css để kết xuất trước (ví dụ SSR). Để kết xuất trước với

pnpm add -D css-loader

pnpm add -D css-loader

gói web. cấu hình. js

url(image.png) => require('./image.png')
url('image.png') => require('./image.png')
url(./image.png) => require('./image.png')
url('./image.png') => require('./image.png')
url('http://dontwritehorriblecode.com/2112.png') => require('http://dontwritehorriblecode.com/2112.png')
image-set(url('image2x.png') 1x, url('image1x.png') 2x) => require('./image1x.png') and require('./image2x.png')

pnpm add -D css-loader 91

Loại

url(image.png) => require('./image.png')
url('image.png') => require('./image.png')
url(./image.png) => require('./image.png')
url('./image.png') => require('./image.png')
url('http://dontwritehorriblecode.com/2112.png') => require('http://dontwritehorriblecode.com/2112.png')
image-set(url('image2x.png') 1x, url('image1x.png') 2x) => require('./image1x.png') and require('./image2x.png')

Vỡ nợ.

pnpm add -D css-loader

Cho phép bật/tắt hoặc thiết lập số lượng trình tải được áp dụng trước trình tải CSS cho

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

pnpm add -D css-loader

pnpm add -D css-loader

Tùy chọn

pnpm add -D css-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

gói web. cấu hình. js

Điều này có thể thay đổi trong tương lai khi hệ thống mô-đun (i. e. webpack) hỗ trợ kết hợp trình tải theo nguồn gốc

import css from "file.css";00

Loại

url(image.png) => require('./image.png')
url('image.png') => require('./image.png')
url(./image.png) => require('./image.png')
url('./image.png') => require('./image.png')
url('http://dontwritehorriblecode.com/2112.png') => require('http://dontwritehorriblecode.com/2112.png')
image-set(url('image2x.png') 1x, url('image1x.png') 2x) => require('./image1x.png') and require('./image2x.png')

Vỡ nợ. phụ thuộc vào giá trị

import css from "file.css";

Theo mặc định, việc tạo bản đồ nguồn phụ thuộc vào tùy chọn

import css from "file.css";

import css from "file.css";

type import =
  | boolean
  | { filter: (url: string, media: string, resourcePath: string) => boolean };

gói web. cấu hình. js

url(image.png) => require('./image.png')
url('image.png') => require('./image.png')
url(./image.png) => require('./image.png')
url('./image.png') => require('./image.png')
url('http://dontwritehorriblecode.com/2112.png') => require('http://dontwritehorriblecode.com/2112.png')
image-set(url('image2x.png') 1x, url('image1x.png') 2x) => require('./image1x.png') and require('./image2x.png')

import css from "file.css";05

Loại

url(image.png) => require('./image.png')
url('image.png') => require('./image.png')
url(./image.png) => require('./image.png')
url('./image.png') => require('./image.png')
url('http://dontwritehorriblecode.com/2112.png') => require('http://dontwritehorriblecode.com/2112.png')
image-set(url('image2x.png') 1x, url('image1x.png') 2x) => require('./image1x.png') and require('./image2x.png')

Vỡ nợ.

type import =
  | boolean
  | { filter: (url: string, media: string, resourcePath: string) => boolean };

Theo mặc định,

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

Bạn có thể kích hoạt cú pháp mô-đun CommonJS bằng cách sử dụng

gói web. cấu hình. js

url(image.png) => require('./image.png')
url('image.png') => require('./image.png')
url(./image.png) => require('./image.png')
url('./image.png') => require('./image.png')
url('http://dontwritehorriblecode.com/2112.png') => require('http://dontwritehorriblecode.com/2112.png')
image-set(url('image2x.png') 1x, url('image1x.png') 2x) => require('./image1x.png') and require('./image2x.png')

import css from "file.css";08

Loại

url(image.png) => require('./image.png')
url('image.png') => require('./image.png')
url(./image.png) => require('./image.png')
url('./image.png') => require('./image.png')
url('http://dontwritehorriblecode.com/2112.png') => require('http://dontwritehorriblecode.com/2112.png')
image-set(url('image2x.png') 1x, url('image1x.png') 2x) => require('./image1x.png') and require('./image2x.png')

Vỡ nợ.

import css from "file.css";

Cho phép xuất các kiểu dưới dạng mảng với các mô-đun, chuỗi hoặc biểu định kiểu có thể xây dựng (i. e.

import css from "file.css";

import css from "file.css";

import css from "file.css";

gói web. cấu hình. js

url(~module/image.png) => require('module/image.png')
url('~module/image.png') => require('module/image.png')
url(~aliasDirectory/image.png) => require('otherDirectory/image.png')

src/chỉ mục. js

url(~module/image.png) => require('module/image.png')
url('~module/image.png') => require('module/image.png')
url(~aliasDirectory/image.png) => require('otherDirectory/image.png')

import css from "file.css";

09

Xuất mặc định là mảng các mô-đun có API cụ thể được sử dụng trong

import css from "file.css";

gói web. cấu hình. js

url(~module/image.png) => require('module/image.png')
url('~module/image.png') => require('module/image.png')
url(~aliasDirectory/image.png) => require('otherDirectory/image.png')

src/chỉ mục. js

import css from "file.css";

15

Cảnh báo

Bạn không cần

import css from "file.css";

12 nữa, vui lòng xóa nó đi

Cảnh báo

Tùy chọn

import css from "file.css";

17 nên được bật nếu bạn muốn sử dụng nó với , theo mặc định cho người dân địa phương sẽ được sử dụng

Xuất mặc định là

yarn add -D css-loader

gói web. cấu hình. js

url(~module/image.png) => require('module/image.png')
url('~module/image.png') => require('module/image.png')
url(~aliasDirectory/image.png) => require('otherDirectory/image.png')

src/chỉ mục. js

url(~module/image.png) => require('module/image.png')
url('~module/image.png') => require('module/image.png')
url(~aliasDirectory/image.png) => require('otherDirectory/image.png')

import css from "file.css";

20

Cảnh báo

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          url: true,
        },
      },
    ],
  },
};

3 quy tắc chưa được phép, thêm

Cảnh báo

Bạn không cần

import css from "file.css";

12 nữa, vui lòng xóa nó đi

Cảnh báo

Tùy chọn

import css from "file.css";

17 nên được bật nếu bạn muốn sử dụng nó với , theo mặc định cho người dân địa phương sẽ được sử dụng

Cảnh báo

Bản đồ nguồn hiện không được hỗ trợ trong

import css from "file.css";

25 do lỗi

Xuất mặc định là biểu định kiểu có thể xây dựng (i. e.

import css from "file.css";

Hữu ích cho các phần tử tùy chỉnh và DOM bóng

Thêm thông tin

gói web. cấu hình. js

src/chỉ mục. js

Đối với mục đích di chuyển, bạn có thể sử dụng cấu hình sau

ví dụ

Gợi ý

Đối với các bản dựng

import css from "file.css";

import css from "file.css";

import css from "file.css";

Ghi chú

Không sử dụng

import css from "file.css";

12 và

pnpm add -D css-loader

89 cùng nhau

gói web. cấu hình. js

url(~module/image.png) => require('module/image.png')
url('~module/image.png') => require('module/image.png')
url(~aliasDirectory/image.png) => require('otherDirectory/image.png')

Với sự trợ giúp của nhận xét

import css from "file.css";

Tài sản

import css from "file.css";

Đối với gói web v5

gói web. cấu hình. js

Đối với các bản dựng sản xuất, bạn nên trích xuất CSS từ gói của mình để có thể sử dụng tải song song các tài nguyên CSS/JS sau này

• Điều này có thể đạt được bằng cách sử dụng mini-css-extract-plugin để trích xuất CSS khi chạy ở chế độ sản xuất

• Thay vào đó, nếu tìm kiếm hiệu suất phát triển tốt hơn và kết quả đầu ra css bắt chước quá trình sản xuất. extract-css-chunks-webpack-plugin cung cấp một mô-đun nóng tải lại phiên bản mở rộng, thân thiện của mini-css-extract-plugin. Các tệp CSS thực của HMR trong dev, hoạt động như mini-css trong non-dev

CSS thuần túy, mô-đun CSS và PostCSS

Khi bạn có CSS ​​thuần túy (không có mô-đun CSS), mô-đun CSS và PostCSS trong dự án của mình, bạn có thể sử dụng thiết lập này

gói web. cấu hình. js

Giải quyết các URL chưa được giải quyết bằng bí danh

mục lục. css

url(~module/image.png) => require('module/image.png')
url('~module/image.png') => require('module/image.png')
url(~aliasDirectory/image.png) => require('otherDirectory/image.png')

gói web. cấu hình. js

url(~module/image.png) => require('module/image.png')
url('~module/image.png') => require('module/image.png')
url(~aliasDirectory/image.png) => require('otherDirectory/image.png')

Xuất có tên với tên xuất tùy chỉnh

gói web. cấu hình. js

url(~module/image.png) => require('module/image.png')
url('~module/image.png') => require('module/image.png')
url(~aliasDirectory/image.png) => require('otherDirectory/image.png')

Tách các tính năng chỉ dành cho yarn add -D css-loader 94 và import css from "file.css";35

Thiết lập sau đây là một ví dụ về việc chỉ cho phép các tính năng của

yarn add -D css-loader

yarn add -D css-loader

yarn add -D css-loader

import css from "file.css";

yarn add -D css-loader

import css from "file.css";

import css from "file.css";

import css from "file.css";

Một trường hợp ví dụ được giả định khi một dự án yêu cầu các biến bản vẽ canvas được đồng bộ hóa với CSS - bản vẽ canvas sử dụng cùng một màu (được đặt theo tên màu trong JavaScript) làm nền HTML (được đặt theo tên lớp trong CSS)

Làm cách nào để cài đặt trình tải CSS trong React?

CSS mô-đun là gì?