8. webpack css 打包（css-loader style-loader sass-loader）

文章目录

css-loader
style-loader
sass-loader
webpack.config.js 配置css 模块

引入背景图片或者字体文件库，需要引入 file-loader 或者 url-loader

css-loader

css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码

npm install --save-dev css-loader

参数说明 css-loader github

style-loader

style-loader 将模块的导出作为样式添加到 DOM 中

npm install style-loader --save-dev

参数说明 style-loader github

sass-loader

sass-loader 加载和转译 SASS/SCSS 文件，将SCSS 文件转为CSS文件

npm install sass-loader node-sass webpack --save-dev

参数说明 sass-laoder github

webpack.config.js 配置css 模块

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require('webpack')

module.exports = {
  ...
  module: {
    rules: [{
      test: /\.scss$/,
      /**
       * loader 是从右到左执行，顺序不能颠倒
       * 1. 最先执行 sass-loader ，将 sass 文件转为css
       * 2. css-loader 将转换后的css文件转为 js模块
       * 3. style-loader 将 css 插入到HTML中的<style>标签中
       */
      use: [{
          loader: "style-loader" // 将 JS 字符串生成为 style 节点
      }, {
          loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
      }, {
          loader: "sass-loader" // 将 Sass 编译成 CSS
      }]
	  // 等价于
      // use: ["style-loader", "css-loader", "sass-loader"]
    }]
  }
};

loader 是从右到左执行，顺序不能颠倒

引入背景图片或者字体文件库，需要引入 file-loader 或者 url-loader

.webpackStudy{
    .huangbiao{
        background-image: url("../images/testimage.png");
        color: red;
        .huanghaili{
            color: blue;
        }
    }
}

因为引入的图片是文件，因此，需要引入 file-loader 或者 url-loader

module: {
    rules: [
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        use: {
          loader: "file-loader",
          options: {
            esModule: false, // 这里设置为false
            outputPath: "fonts/", // 指定字体输入的文件夹，打包地址是 “/dist/fonts/字体文件”
            publicPath: "/fonts" // 指定字体的路径，即打包结果引入的地址是 "/fonts/字体文件名"
          }
        }
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              esModule: false, // 这里设置为false
              outputPath: "images/", // 指定图片输入的文件夹， 打包地址是 “/dist/images/图片名字”
              publicPath: "/images", // 指定获取图片的路径，即打包结果引入的地址是 "/images/图片名字"
              // limit  (如果小于 8K ，则转为base64，否则返回一个url地址)
              limit: 8192,
              name: "[name].[hash:8].[ext]" // 输入的图片名
            }
          }
        ]
      },
      {
        test: /\.(scss|css)$/,
        /**
         * loader 是从又向做执行
         * 1. 最先执行 sass-loader ，将 sass 文件转为css
         * 2. css-loader 将转换后的css文件转为 js模块
         * 3. style-loader 将 css 插入到HTML中的<style>标签中
         */
        use: [
          {
            loader: "style-loader" // 将 JS 字符串生成为 style 节点
          },
          {
            loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
          },
          {
            loader: "sass-loader" // 将 Sass 编译成 CSS
          }
        ]
        // 等价于
        // use: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  },