欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webpack(7)_CSS_使用style-loader和css-loader

程序员文章站 2022-03-14 13:49:02
...

webpack除了编译打包js外,还可以编译处理CSS,本篇文章主要讲述如何使用style-loader和css-loader对css打包,主要从以下几点进行讲述:

  • css的引入
  • 使用style-loader和css-loader打包css
  • 使用style-loader/url
  • 使用style-loader/useable
  • 使用style-loader的options配置
  • 使用css-loader的options配置

css的引入

1、css的引入分为三种情况:

  • 通过<style></style>标签,在标签内可以写css样式
  • 通过<link></link>标签引入css文件
  • 在html标签元素中以style属性来定义样式

2、在js中导入css样式有:

  • import “base.css”
  • import Base from “base.css”

使用style-loader和css-loader打包css

1、 style-loader

  • 作用
    style-loader能够在需要载入的html中创建一个<style></style>标签,标签里的内容就是CSS内容。
  • 安装style-loader
    npm install style-loader --save-dev

2、css-loader

  • 作用
    css-loader是允许在js中import一个css文件,会将css文件当成一个模块引入到js文件中。
  • 安装css-loader
    npm install css-loader --save-dev

3、实例

  • 进入空目录Test,并初始化,生成package.json文件
    npm init
  • 创建目录和文件src/css/base.css,并添加如下代码
html{
    background: red;
}
  • 创建src/app.js,并将base.css文件当成模块进行引入
import './css/base.css';
  • 创建webpack.config.js,并编写打包脚本
// 引入node的path模块
var path = require('path');
module.exports = {
    entry: {
        app: "./src/app.js"  // 要打包的入口文件
    },
    output: {
        path: path.resolve(__dirname, "dist"), // 使用绝对路径,dist目录
        filename: "[name].bundle.js" // 或./dist/[name].[hash:5].js
    },
    module: {
        rules: [ // 定义css规则
            {
                test: /\.css$/, // 正则匹配要识别的css
                use: [
                    {
                        loader: 'style-loader' // 使用style-loader进行处理,位置必须在css-loader前面
                    },
                    {
                        loader: 'css-loader' // 使用css-loader进行处理
                    }
                ]
               //use:['style-loader','css-loader'] // 此处也可以这样写
            }
        ]
    }
}

注:上面是webpack2的写法,下面是webpack1的写法,webpack1建议抛弃。

module: {
    loaders: [
       {
           test: /\.css$/,
           loader: 'style-loaer!css-loader'
       }
    ]
}
  • 执行打包命令
    webpack
    webpack(7)_CSS_使用style-loader和css-loader
  • 打包结果
    在dist目录下生成app.bundle.js,打开这个文件,会发现已经将css打包成js代码
// module
exports.push([module.i, "html{\r\n    background: red;\r\n}", ""]);

4、测试打包文件

  • 创建index.html ,并引入打包好的app.bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="./dist/app.bundle.js"></script>
</body>
</html>
  • 测试结果
    页面背景变成红色,说明css生效,打开浏览器,查看页面代码,会发现多了个<style>标签,并且将base.css中的内容写入到标签里面。
    webpack(7)_CSS_使用style-loader和css-loader

使用style-loader/url

1、 作用

使用style-loader会将js中的css样式打包成<style>标签,而使用style-loader/url则会将js中引入的css文件样式打包成一个css文件,并通过<link>标签引入。

2、 安装file-loader

引入文件则需要使用file-loader,npm install file-loader --save-dev

3、 配置webpack.config.js文件

// 引入node的path模块
var path = require('path');
module.exports = {
    entry: {
        app: "./src/app.js"  // 要打包的入口文件
    },
    output: {
        path: path.resolve(__dirname, "dist"), // 使用绝对路径,dist目录
        publicPath: './dist/',// todo 指定打包后页面加载的文件路径
        filename: "[name].bundle.js" // 或./dist/[name].[hash:5].js
    },
    module: {
        rules: [ // 定义css规则
            {
                test: /\.css$/, // 正则匹配要识别的scc
                use: [
                    {
                        loader: 'style-loader/url' // 使用style-loader进行处理,位置必须在css-loader前面
                    },
                    {
                        loader: 'file-loader' // 使用css-loader进行处理
                    }
                ]
                // use:['style-loader','css-loader']
            }
        ]
    }
}

4、打包测试

执行打包命令webpack,会在dist目录下生成一个css文件,文件内容就是base.css文件中的样式。
webpack(7)_CSS_使用style-loader和css-loader
运行index.html,在浏览器上查看源代码,会发现此时css样式是用<link>引入的:
webpack(7)_CSS_使用style-loader和css-loader
5、 注意

使用style-loader会将css打包成css文件,并将css文件通过<link>标签进行引入,当app.js中import两个css文件时,执行打包时会在dist目录下生成两个css文件,然后html页面也会引入两个css文件。
例如:

  • 在src/css/目录下新建common.css文件
  • 在app.js中引入
    import './css/base.css';
    import './css/common.css';
  • 执行打包命令webpack
  • 在dist目录下生成两个css文件,在浏览器上查看,会发现有两个css文件。
    webpack(7)_CSS_使用style-loader和css-loader

使用style-loader/useable

1、作用

使用style-loader/useable,会使导入的css模块能够使用use()和unuse()方法,方便我们进行操作。

2、配置webpack.config.js文件

 rules: [ // 定义css规则
            {
                test: /\.css$/, // 正则匹配要识别的css
                use: [
                    {
                        loader: 'style-loader/useable' // 使用userable
                    },
                    {
                        loader: 'css-loader'
                    }
            }
        ]

3、在app.js中引入base.css文件,并编写测试代码

import Base from './css/base.css';
var flag = false;
setInterval(function () {
    if (flag) {
        Base.use();
    } else {
        Base.unuse();
    }
    flag = !flag;
}, 500);

4、打包测试

执行打包命令webpack,运行index.html会发现当前css样式会不断的加载和移除。

使用style-loader的options配置

对style-loader进行操作,可以配置options属性,options属性常用的有:

  • attrs
  • insertAt
  • insertInto
  • singleton
  • transform

1、attrs

  • 作用
    <style></style>标签设置属性,attrs是个对象,内容以键值对形式呈现。
  • 配置webpack.config.js
use: [
         {
             loader: 'style-loader',
             options:{
                   attrs:{
                        id:"index", // 创建id为index,name为index的<style>
                        name:"index"
                 },
                 insertAt :"top", // 插入到id为app的dom元素下
                 singleton:true // 是否只使用一个style,会将页面上的style标签合成一个  
             }
         },
         {
             loader: 'css-loader'
         }
     ]

测试结果
webpack(7)_CSS_使用style-loader和css-loader

2、insertAt和insertInto

  • 作用
    在指定的位置插入css样式 。insertAt 值为 string 类型,可以是 top 或者 bottom,表示插入某个标签 内 的顶部或者结尾,和该标签是父子关系;insertInto表示插入到某个dom元素内。
  • 注意,
    两个属性的标签选择器,都是通过 document.querySelector 实现的,所以存在两个问题:
    1)属性的值,需要符合 document.querySelector 的语法;
    2)低版本浏览器(比如IE)可能不支持这个选择器API;
  • 实例
    1)insertAt属性设置为top,会将css样式插入到<header></header>标签的首行
    配置webpack.config.js
use: [
         {
             loader: 'style-loader',
             options:{
                 insertAt :"top", // 插入到id为app的dom元素下
                 singleton:true // 是否只使用一个style,会将页面上的style标签合成一个  
             }
         },
         {
             loader: 'css-loader'
         }
     ]

测试结果
webpack(7)_CSS_使用style-loader和css-loader
2)insertAt属性设置为bottom,会将css样式插入到<header></header>标签的末行
配置webpack.config.js

use: [
         {
             loader: 'style-loader',
             options:{
                 insertAt :"bottom", // 插入到id为app的dom元素下
                 singleton:true // 是否只使用一个style,会将页面上的style标签合成一个  
             }
         },
         {
             loader: 'css-loader'
         }
     ]

测试结果
webpack(7)_CSS_使用style-loader和css-loader
3)使用insertInto将style样式插入到id为app的元素内
配置webpack.config.js

use: [
         {
             loader: 'style-loader',
             options:{
                 insertInto:"#app", // 插入到id为app的dom元素下
                 singleton:true // 是否只使用一个style,会将页面上的style标签合成一个  
             }
         },
         {
             loader: 'css-loader'
         }
     ]

测试结果
webpack(7)_CSS_使用style-loader和css-loader
4、singleton

  • 作用
    是否只使用一个<style>标签,会将页面上的<style>标签合成一个。
  • 类型
    布尔类型,true或者false
  • webpack.config.js配置
use: [
         {
            loader: 'style-loader',
              options:{     
                  singleton:true // 是否只使用一个style,会将页面上的style标签合成一个 
              }
          },
          {
              loader: 'css-loader'
          }
     ]

5、transform

  • 作用
    在js中可以拿到字符串类型的css样式,然后对css样式进行转换处理,然后返回转换后的css样式。
  • webpack.config.js配置
use: [
         {
            loader: 'style-loader',
              options:{    
                  // 转化,浏览器环境下,插入页面前,通过这个js能够获取css,并做一些操作 
                  transform:"css.transform.js" 
              }
          },
          {
              loader: 'css-loader'
          }
     ]
  • css.transform.js
    在项目根目录下创建 css.transform.js
// 对css进行形变
module.exports = function (css) {
    console.log(css);
    console.log(window.innerWidth);
    // 如果什么都不做,直接return css;

    if (window.innerWidth >= 768) {
        return css.replace("red","blue");
    }else {
        return css.replace("red","orange");
    }
    // 在每个class样式前,添加color属性
 /*   const transformed = css.replace(/}/g, 'color: blue;\n}')
    return transformed;*/
}

使用css-loader的options配置

对css-loader进行操作,可以配置options属性,options属性常用的有:

  • importLoader(@import)
  • minimize(是否压缩)
  • modules(是否启用css-modules)

1、importLoader(@import)

  • 作用
    启用/禁用 @import 处理

2、minimize(是否压缩)

  • 作用
    会将css进行压缩,例如去掉空格等。
  • webpack.config.js配置
use: [
         {
            loader: 'style-loader',
          },
          {
              loader: 'css-loader',
              options: {
                  minimize: true // 对style样式进行压缩
              }
          }
     ]

webpack(7)_CSS_使用style-loader和css-loader
3、modules(是否启用css-modules)

  • 作用
    启用modules属性,会将css分模块导入。
  • webpack.config.js配置
use: [
         {
            loader: 'style-loader',
          },
          {
              loader: 'css-loader',
              options: {
                  modules:true // 启用css模块化调用
              }
          }
     ]
  • 在app.js中调用
import Base from './css/base.css';
import './css/common.css';
var app = document.getElementById("app");
app.innerHTML = `<div class="${Base.box}"></div>`;
  • 在base.css中添加代码
.box{
    composes: bigBox from './common.css'; // 模块化导入common.js中的bigBox
    width: 300px;
    height:300px;
    border-radius: 4px;
}
  • 在common.js中添加代码
.bigBox{
   background: blue;
}
  • 执行打包命令
    webpack

  • 查看浏览器代码,会发现class名是一串乱序的字符串
    webpack(7)_CSS_使用style-loader和css-loader

  • 修改生成的class的名称
    通过localIdentName来配置修改生成的class的名称,[path][name]是当前路径名称,[local]是当前class名称,[hash:base64:5]指5位的base54编码的hash值。

use: [
         {
            loader: 'style-loader',
          },
          {
              loader: 'css-loader',
              options: {
                  modules:true, // 启用css模块化调用
                  localIdentName:"[path][name]_[local]_[hash:base64:5]" // 修改生成的class的名称
              }
          }
     ]

如下图所示:
webpack(7)_CSS_使用style-loader和css-loader
参考:
https://www.npmjs.com/package/css-loader
http://www.css88.com/doc/webpack2/loaders/css-loader/
https://yq.aliyun.com/articles/281033

相关标签: 学习笔记