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
打包结果
在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中的内容写入到标签里面。

使用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>引入的：

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文件。

使用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名是一串乱序的字符串
修改生成的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

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

css的引入

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

使用style-loader/url

使用style-loader/useable

使用style-loader的options配置

使用css-loader的options配置

Webpack中css-loader和less-loader的使用教程

webpack(7)_CSS_使用PostCss

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

webpack(7)_CSS_使用extract-text-webpack-plugin提取css