webpack的CSS加载器

Jioby 发布于2019-08-23 11:54 / 1699人阅读

摘要：目的就是让页面可以在每个浏览器上正常运行。是一个的处理平台可以帮实现更多的功能。用法安装配置文件在中引入插件或者添加对的支持。还提供了另外的方法来声明全局变量，即在里进行配置。

webpack中常用的加载器 css-loader 处理css中路径引用等问题

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

options

alias: 解析别名
importLoaders(@import): 在css-loader前应用的loader的数目，默认为0
Minimize: true or false 是否开启css代码压缩，比如压缩空格不换行
modules: 是否开启css-module

module.exports = {
  ...
  module: {
    rules: [{
      test: /.css$/,
      use: ["style-loader", {
        loader: "css-loader",
        options: {//当css文件中又引用了其他的css的时候，需要设置importLoaders
          importLoaders: 1
        }
      }]
    }]
  }
};

style-loader 动态把样式写入css

加载的css作为style标签内容插入到html中,以形式在html页面中插入css代码

options

insertAt: 插入位置
insertInto: 插入到指定的dom
singleton: true or false，多个样式是否只生成一个标签

postcss-loader

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

webpack.config.js:
module: {
  rules: [{
    test: /.css$/
    loader: "style-loader!css-loader!postcss-loader"
  }]
}
postcss.config.js
module.exports = {
  plugins: [
    require("autoprefixer")//在postcss-loader中引入autoprefixer插件
  ]
}

或者

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

less-style

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

module: {
  rules: [{
    test: /.less$/,
    loader: "style-loader!css-loader!less-loader"
  }]
}

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

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

module.exports = {
  ...
  module: {
    rules: [{
      test: /.less$/,
      use: ["style-loader", "css-loader", {
        loader: "less-loader",
        options: {
          sourceMap: true
        }
      }]
    }]
  }
};

less-loader可用的options:
modifyVars 或 globalVars声明全局变量: {Object}，在less使用全局变量时，我们可以定义一个全局变量的文件，然后每次使用时都引用这个文件，显而易见，这个方法很麻烦。less还提供了另外的方法来声明全局变量，即在options.globalVars/options.modifyVars里进行配置。

modifyVars修改全局的less变量, globalVars声明全局的less变量

module.exports = {
  ...
  module: {
    test: /.less$/,
    use: [
      "style-loader",
      "css-loader,
      {
        loader: "less-loader",
        options: {
          midifyVars: {
            @bgColor: red; //或者bgColor: red,有没有@都可以
          }
          /*globalVars: {
            @bgColor: red;
          }*/
        }
      }
    ]
  }
};

body {
  background-color: @bgColor;//使用时必须有@
}

编译后

body {
  background-color: red;
}

GPU云服务器云服务器 js css 加载器 js css加载器 webpack按需加载加载css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97645.html

前端webpack workflow（二）——Webpack基本使用

摘要：还可以用作文件加载使用，详细请看。实用命令除了简单运行，还可以添加几个参数，方便部署文件处理。以上仅仅介绍了前端开发最基本的用法，更多参数以及功能使用，参考官网作者：Jogis原文链接：https://github.com/yesvods/Blog/issues/3转载请注明原文链接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

roadtogeek 2019-08-21 10:47 评论0 收藏0
前端webpack workflow（二）——Webpack基本使用

摘要：还可以用作文件加载使用，详细请看。实用命令除了简单运行，还可以添加几个参数，方便部署文件处理。以上仅仅介绍了前端开发最基本的用法，更多参数以及功能使用，参考官网作者：Jogis原文链接：https://github.com/yesvods/Blog/issues/3转载请注明原文链接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

LeexMuller 2019-08-28 18:22 评论0 收藏0
前端webpack workflow（二）——Webpack基本使用

摘要：还可以用作文件加载使用，详细请看。实用命令除了简单运行，还可以添加几个参数，方便部署文件处理。以上仅仅介绍了前端开发最基本的用法，更多参数以及功能使用，参考官网作者：Jogis原文链接：https://github.com/yesvods/Blog/issues/3转载请注明原文链接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

KevinYan 2019-08-01 14:56 评论0 收藏0
webpack初探

摘要：我们还想要的颜色我们通过下面命令行可以做到观察模式我们不想每一次项目变化都要手动编译可以缓存两次编译之间没有变化的模块和输出文件。开发服务器使用开发服务器开发体验会更好这将在本地启动一个端口的服务，指向静态文件以及自动编译。原文英文版来自webpack官网 demo代码本文地址欢迎浏览这是一篇通过一个小例子给你介绍webpack的文章你可以通过这篇文章了解到：如...

soasme 2019-08-19 17:12 评论0 收藏0
webpack初探

摘要：我们还想要的颜色我们通过下面命令行可以做到观察模式我们不想每一次项目变化都要手动编译可以缓存两次编译之间没有变化的模块和输出文件。开发服务器使用开发服务器开发体验会更好这将在本地启动一个端口的服务，指向静态文件以及自动编译。原文英文版来自webpack官网 demo代码本文地址欢迎浏览这是一篇通过一个小例子给你介绍webpack的文章你可以通过这篇文章了解到：如...

Lavender 2019-08-28 18:27 评论0 收藏0