javascript - 如何将 CSS 加载到 Webpack 5 中的 JavaScript 变量中?
问题描述
我有
样式.css
section {
display: flex;
background: url('./bg.svg');
}
脚本.mjs
import css from './style.css'
console.log(css)
webpack.config.mjs
import path from 'path'
import url from 'url';
import autoprefixer from 'autoprefixer'
const __dirname = path.dirname(url.fileURLToPath(import.meta.url))
export default {
mode: 'production',
context: path.resolve(__dirname),
entry: path.resolve(__dirname, 'script.mjs'),
output: {
path: path.resolve(__dirname, 'build'),
filename: `[name].js`,
},
module: {
rules: [
{
test: /\.(svg|png|jpg|jpeg)$/,
type: 'asset/inline',
},
{
test: /\.css$/,
type: 'asset/source',
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer,
],
},
},
],
},
],
},
}
包.json
{
"scripts": {
"build": "webpack --config webpack.config.mjs"
},
"devDependencies": {
"autoprefixer": "~10.2.5",
"css-loader": "~5.2.4",
"postcss-loader": "~5.2.0",
"webpack": "~5.36.2",
"webpack-cli": "~4.6.0"
}
}
预期的 console.log 输出
display: -webkit-box;display: -ms-flexbox;display: flex;background: url('data:image/svg+xml;utf8,...');
实际结果
当 postcss-loader 存在时,我得到了构建错误:
PostCSS Loader has been initialized using an options object that does not match the API schema"
当 webpack.config.mjs 中没有 postcss-loader 时,我在 console.log 中得到了错误的输出:
// Imports
import ___CSS_LOADER_API_IMPORT___ from "./node_modules/css-loader/dist/runtime/api.js";
import ___CSS_LOADER_GET_URL_IMPORT___ from "./node_modules/css-loader/dist/runtime/getUrl.js";
import ___CSS_LOADER_URL_IMPORT_0___ from "./bg.svg";
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
// Module
___CSS_LOADER_EXPORT___.push([module.id, "section {\n\tdisplay: flex;\n\tbackground: url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ");\n}", ""]);
// Exports
export default ___CSS_LOADER_EXPORT___;
解决方案
请针对两个单独的问题尝试这些修复
- PostCSS 加载器未初始化:
//....{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
autoprefixer,
],
},
},
}, //....
- 控制台未按预期退出:当前,CSS 文件正在加载但未转换为字符串,因此您在控制台中看到垃圾。您需要systemjs/text 插件将 CSS 文件中的文本作为字符串加载。
首先在您的终端中执行以下操作
//install Systemjs
npm install systemjs
//install jspm
npm install jspm@0.16x -g
// change over to your project directory
cd my-project
//intall jspm into your project
npm install jspm@0.16x --save-dev
//initialise jspm
jspm init
//install text plugin
jspm install text
然后在你的 script.mjs
import './style.css!';
// Now, you can retrieve the contents of the file using the text plugin:
import css from './style.css!text';
console.log(css);
请注意:还有其他安装 systemjs/text 插件的方法。有关更多安装信息,请参阅systemjs/text和systemjs。
推荐阅读
- javascript - 如何使文件上传在应用内浏览器中工作?
- c# - 为什么 AddListener 不回拨?
- javascript - 有没有办法编辑 javascript 函数以在 html 表单输出中实时更新?
- mbed - 如何在 Mbed OS 中设置特定的 LoRa 扩展因子
- linux - 在 docker 主机中无法访问在 docker 容器中运行的应用程序
- pypy - Python:需要关于运行它的帮助
- excel - 复制一个单元格并粘贴到一系列单元格中的第一个空白行
- r - 如何使用 RPostgreSQL 使用数据框更新数据库中的表
- rust - 如何在 Rust 中将布尔值转换为整数?
- kendo-ui-angular2 - 如何将 JAN 添加到 Kendo DatePicker (Angular2) 弹出左侧导航中,它当前显示年份,然后是 FEB