webpack手写loader ---- style-loader
程序员文章站
2024-02-11 10:57:58
...
let loaderUtils = require("loader-utils");
//style-loader是接收less-loader过来的内容进行解析
function loader(source) {
//组装成style格式的css
let style = (`
let style = document.createElement("style");
style.innerHTML = ${JSON.stringify(source)};
document.head.appendChild(style);
`);
return style;
}
//request是文件的请求路径,创建style标签,动态添加到head
loader.pitch = function (request) {
let style = `
var style = document.createElement("style");
style.innerHTML = require(${loaderUtils.stringifyRequest(this, "!!" + request)});
document.head.appendChild(style);
`;
return style;
};
module.exports = loader;
下一篇: PHP中二维数组排序问题_PHP教程
推荐阅读
-
webpack手写loader ---- style-loader
-
webpack4.0各个击破(6)—— Loader篇
-
webpack:使用expose-loader 解决第三方库的插件依赖问题
-
手把手带你自定义配置Angular CLI下的Webpack和loader处理
-
webpack-url-loader 解决项目中图片打包路径问题
-
Webpack中css-loader和less-loader的使用教程
-
webpack4之如何编写loader的方法步骤
-
Vue + Webpack + Vue-loader学习教程之功能介绍篇
-
webpack file-loader和url-loader的区别
-
Vue + Webpack + Vue-loader学习教程之相关配置篇