webpack学习笔记之五 -- css-loader - stylus-loader

在上一篇中,学习了 css-loader 这个组件.

它的作用在于.

在使用 webpack 打包的时候.
如过碰到 import xxx.css ,就使用这个 css-loader 加载 .css 文件内容.
如果仅仅只有 css-loader , .css 文件里的的内容,仅仅只是写入打包的js代码(bundle.js).但在页面上并不会生效.
当搭配 style-loader ['style-loader','css-loader'] 之后,可以将 .css 代码写入到页面的 HTML 文件的<head>中(以<style></style>形式).

less-loader & stylus-loader

到目前我们知道了,在 webpack.config.js 文件中,配置 module 节点的目的,是为了在 webpack 遇到 import require等导入文件的语句是,能够选择合理的 loader 去处理这些文件.

比如之前的

babel -> .js 处理 import xxx.js 的文件 文件.(当然,webpack本身是认识 .js 文件的,这里的主要是为了语法和API兼容处理)
.css -> style-loader & css-loader ,处理 import xxxx.css

在前端开发中,有一些 CSS 样式预处理框架,比如 .

less
stylus

在前端开发中,我们也可以创建 .styl & .less 文件.

那么在 import xxx.styl 或者 import xxx.less 文件的时候,肯定也需要对应的loader来处理当前文件的打包工作.

less less-loader

新建一个 webpack.config.js 文件.

写入基本配置.

const path = require('path')

module.exports = {
  entry: path.join(__dirname, 'app/index.js'),
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        loader:'babel-loader' // 两个作用 1. ESX -> ES5 2. API 垫片   
      },
      {
        test: /\.css$/,
        loader: ['style-loader', 'css-loader']
      }
}

这里,我配置了.css文件的 loader , 那么webpack在处理 import xxx.css就没有问题了.

新建一个 index.html文件.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <p class="cssFile"></p>
  <p class="lessFile"></p>
  <p class="stylusFile"></p>
  <script src="bundle.js"></script>
</body>
</html>

新建一个 css-file.css.

.cssFile {
  text-align: center;
  font-size: 30px;
  text-decoration: underline;
}

.cssFile::after {
  content: '这是 css-file.css文件提供的样式'
}

执行 npm run build

image.png

效果

image.png

css-loader ,配置成功.

同理新建一个 less-file.less 文件.

image.png

键入代码

.lessFile {
  font-size: 20px;
  text-align: center;
  text-decoration: line-through;
  color: royalblue;
  &::after {
    content:'这是less-file.less文件提供的样式'
  }
}

安装 less & less-loader

npm i --save-dev less less-loader

在 webpack.config.js 的 moudle 节点中,配置对应 .less 文件的 loader

 {
        test: /\.less$/,
        loader: ['style-loader', 'css-loader', 'less-loader']
      },

在 index.js 中导入 import './assets/less-file.less'

执行 npm run build

image.png

打包成功.

查看界面

image.png

同理, 新建一个 styl(stylus格式文件的后缀名) 文件.

image.png

并键入一下代码

.stylusFile 
  font-size 40px
  color pink 
  text-align center
  &::after
    content :' 这是 stylus-file.styl 文件提供的样式'

安装 stylus & stylus-loader

npm i --save-dev stylus stylus-loader

在 index.js 文件中导入 import './assets/stylus-file.styl'

执行 npm run build

image.png

查看界面

image.png

不管目标文件是.css,.less 还是 .styl.最终都是通过 style-loader 写到了页面当中.
**style-loader就是把css写入到HTML.head.style中的一个loader!!******

结论:

在 webpack 中,一个模块就是一个文件.比如 .css .less .styl.
- 一般模块,都是单个文件,都是使用 import require 来导入.
处理模块的组件在 webpack.config.js 一般是用 module 去配置.
当 webpack打包的时候,碰到了模块,就去找对应的loader 去处理.

.less文件打包配置

npm i --save-dev less less-loader
webpack.config.js :{ test: /\.less$/, loader: ['style-loader', 'css-loader', 'less-loader'] },

.stylus文件打包配置

npm i --save-devi stylus stylus-loader
webpack.config.js:{ test: /\.styl$/, loader: ['style-loader', 'css-loader', 'stylus-loader'] }

webpack学习笔记之五 -- css-loader - stylus-loader