来自 Web前端 2020-04-29 17:44 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

掌握style-loader

varupdate =require("!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js")(content, options);

加载的css作为style标签内容插入到html中,以

style-loader的导出方式和普通的loader不太一样,默认导出一个空方法,通过pitch导出的。

options

// config{ test: /.(css)$/, use: [ { loader: 'style-loader', options: { injectType: 'singletonStyleTag', }, }, { loader: 'css-loader' }, ],}// jsconst globalStyle = require('./assets/style/global.css');const indexStyle = require('./assets/style/index.css');

postcss-loader:为了浏览器的兼容性,有时候我们必须加上-webkitm, -ms, -moz等前缀。目的就是让页面可以在每个浏览器上正常运行。postcss是一个CSS的处理平台可以帮CSS实现更多的功能。

其它的用法就不多说了,自行查看style-loader。

标签

先看引入依赖部分的代码:

loader用于转换应用程序的资源文件,他们是运行在nodejs下的函数,使用参数来获取一个资源的来源并且返回一个新的来源,例如:你可以使用loader来告诉webpack去加载一个coffeeScript或者Babel文件。

npminstallstyle-loader--save-dev

loader的解析

源码解析

less-style

同样的,update的实际内容是:

postcss-loader

如何使用style-loader1. 安装style-loader

insertInto: 插入到指定的dom

singletonStyleTag

webpack中常用的加载器

简单来说,module.exports里最主要的就是insertStyleElement和applyToTag两个方法,简化一下就是这样的:

importLoaders: 在css-loader前应用的loader的数目,默认为0

接下来看看loader的内容:

postcss.config.js

上面提到默认情况下有几个样式文件就会插入几个style标签,将injectType设置为singletonStyleTag可将所有的样式文件打在同一个style标签里。

modules: 是否开启css-module

module.exports = (list, options) = { options = options || {}; const styles = listToStyles(list, options); addStylesToDom(styles, options);}function insertStyleElement(options) { var style = document.createElement('style'); Object.keys(options.attributes).forEach(function (key) { style.setAttribute(key, options.attributes[key]); }); return style;}function applyToTag(style, options, obj) { var css = obj.css; var media = obj.media; if (media) { style.setAttribute('media', media); } if (style.styleSheet) { style.styleSheet.cssText = css; } else { while (style.firstChild) { style.removeChild(style.firstChild); } style.appendChild(document.createTextNode(css)); }}
module.exports = { plugins: [ require//在postcss-loader中引入autoprefixer插件 ]}

const autoprefixer = require;module: { rules: [{ test: /.css$/, use: ['style-loader', 'css-loader', { loader: 'postcss-loader', options: { plugins() { return [autoprefixer]; } } }] }]}

输出的DOM结构为:

添加对webpack的LESS支持。当遇到less文件时,先交给less-loader处理,然后交给css-loader,最后交由style-loader处理,然后执行webpack打包

  1. 配置webapck

    // webpack.config.jsmodule.exports = { module: { rules: [ { test: /.(css)$/, use: [ { loader: 'style-loader', options: {}, }, { loader: 'css-loader' }, ], }, ], },};

css-loader 处理css中路径引用等问题

默认的loader都是从右向左像管道一样执行,而pitch是从左到右执行的。

要启用CSS的source map,你需要将sourceMap选项传递给less-loader和css-loader

!!模块前面的两个感叹号的作用是禁用loader的配置的,如果不禁用的话会出现无限递归调用的情况。

insertAt: 插入位置

  1. 引入一个样式文件

    constindexStyle =require('./assets/style/index.css');

  2. 见证奇迹的时刻

    webpack

alias: 解析别名

简单地写一下吧,具体的源码见传送门

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

输出的DOM结构为:

webpack.config.js:

将样式插入DOM的操作实际是在runtime阶段进行的,还是以默认情况举例,看看injectStylesIntoStyleTage做了什么。

形式在html页面中插入css代码

const style = document.createElement('style'); // 新建一个 style 标签style.type = 'text/css';style.appendChild(document.createTextNode(content)) // CSS 写入 style 标签document.head.appendChild(style); // style 标签插入 head 中

singleton: true or false,多个样式是否只生成一个

// 获取 webpack 配置里的 optionsconst options = _loaderUtils.default.getOptions(this) || {};// 校验 options(0, _schemaUtils.default)(_options.default, options, { name: 'Style Loader', baseDataPath: 'options'});// style 标签插入的位置,默认是 headconst insert = typeof options.insert === 'undefined' ? '"head"' : typeof options.insert === 'string' ? JSON.stringify(options.insert) : options.insert.toString();// 设置以哪种方式插入 DOM 中// 详情见这个:-contrib/style-loader#injecttypeconst injectType = options.injectType || 'styleTag';switch (injectType) { case 'linkTag': {} case 'lazyStyleTag': case 'lazySingletonStyleTag': {} case 'styleTag': case 'singletonStyleTag': default: {}}

style-loader 动态把样式写入css

默认情况下,style-loader每一次处理引入的样式文件都会在DOM上创建一个style标签,比如此时引入两个样式文件:

options

这两种类型的injectType区别在于它们是延迟加载的:

module.exports = { ... module: { rules: [{ test: /.css$/, use: ['style-loader', { loader: 'css-loader', options: {//当css文件中又引用了其他的css的时候,需要设置importLoaders importLoaders: 1 } }] }] }};
const globalStyle = require('./assets/style/global.css');const indexStyle = require('./assets/style/index.css');
module.exports = { ... module: { rules: [{ test: /.less$/, use: ['style-loader', 'css-loader', { loader: 'less-loader', options: { sourceMap: true } }] }] }};

这个方法的作用是:如果引入的是es6模块,直接返回,如果是commonjs模块,则将引入的内容放在一个对象的default属性上,然后返回这个对象。

CSS SourceMap信息文件,里面存储着位置信息。随着代码增多,我们会对代码进行压缩,代码压缩之后进行调bug定位会非常困难,于是引入sourceMap记录压缩前后的位置信息,当产生错误时直接定位到未压缩前的位置,方便调试。简单来说就是记录压缩的翻译文件,通过这个文件可以找到你的对应源码

日常的开发中处理样式文件时,一般会使用到style-loader和css-loader这两个loader。

loader的解析类似模块,一个loader模块会导出一个方法并且可被nodejs写为可兼容的JavaScript,通常情况下通过npm来管理loader,但你也可以把loader放在自己的应用里。

输出的DOM结构为:

module: { rules: [{ test: /.css$/ loader: 'style-loader!css-loader!postcss-loader' }]}

style-loader的作用是将CSS代码插入到DOM中,如果按照顺序从css-loader接收到一个js字符串的话,就无法获取到真实的CSS样式了。所以正确的做法是先执行style-loader,在它里面去执行css-loader,拿到经过处理的CSS内容,再插入到DOM中。

用于在js中加载css,解释@import和url()

为什么style-loader需要这样呢?

安装postcss: npm install postcss-loader autoprefixer

上述代码都是style-loader返回的,真正执行是在runtime阶段。

Minimize: true or false 是否开启css代码压缩,比如压缩空格不换行

stylehtml, body { height: 100%;}#app { background: #ffffff;}/stylestyle.container { color: red;}.zelda { width: 260px; height: 100px;}/style
module: { rules: [{ test: /.less$/, loader: 'style-loader!css-loader!less-loader' }]}

可以看到,两个样式文件的内容都被放到同一个style标签里了,并且是按照我们引入样式文件的顺序,似乎还比较符合预期。

什么是loader

也就是在这里才去调用css-loader来处理样式文件。

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:掌握style-loader

关键词: