webpack处理样式资源

Posted 天界程序员

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack处理样式资源相关的知识,希望对你有一定的参考价值。

webpack 只能理解 javascript 和 JSON 文件,Webpack 本身是不能识别样式资源的,所以我们需要借助 Loader 来帮助 Webpack 解析样式资源。样式资源文件:Css、Less、Sass、Scss、Styl

我们找 Loader 都应该去官方文档中找到对应的 Loader,然后使用官方文档找不到的话,可以从社区 Github 中搜索查询。

Webpack5-loader


处理CSS资源

1、需要的loader

  • css-loader : 负责将 Css 文件编译成 Webpack 能识别的模块
  • style-loader: 动态创建一个 Style 标签,里面放置 Webpack 中 Css 模块内容,样式就会以 Style 标签的形式在页面上生效

2、下载包到项目

npm i css-loader style-loader -D

3、配置loader

  module: 
    rules: [
      
        // 用来匹配 .css 结尾的文件
        test: /\\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      ,
    ],
  ,

注意:use 数组里面 Loader 执行顺序是从右到左,先加载的是css-loader最后才是style-loader。


处理less资源

1、需要的loader

  • less-loader:负责将 Less 文件编译成 Css 文件

  • css-loader : 负责将 Css 文件编译成 Webpack 能识别的模块

  • style-loader: 动态创建一个 Style 标签,里面放置 Webpack 中 Css 模块内容,样式就会以 Style 标签的形式在页面上生效

2、下载包到项目

npm i less-loader -D

css-loader 、style-loader也是必要的依赖包,如果没有下载需要下载。

3、配置loader

module: 
    rules: [
      
        // 用来匹配 .less 结尾的文件
        test: /\\.less$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader", "less-loader"],
      ,
    ],
  ,

这里的loader执行顺序:less-loader ===> css-loader ===> style-loader


处理 Sass 和 Scss 资源

1、需要的loader

  • sass-loader:负责将 Less 文件编译成 Css 文件

  • sass: sass-loader 依赖 sass 进行编译

  • css-loader : 负责将 Css 文件编译成 Webpack 能识别的模块

  • style-loader: 动态创建一个 Style 标签,里面放置 Webpack 中 Css 模块内容,样式就会以 Style 标签的形式在页面上生效

2、下载包到项目

npm i sass-loader sass -D

css-loader 、style-loader也是必要的依赖包,如果没有下载需要下载。

3、配置loader

module: 
    rules: [
      
        // 用来匹配 .sass/.scss 结尾的文件
        test: /\\.s[ac]ss$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader", "sass-loader"],
      ,
    ],
  ,

这里的loader执行顺序:sass-loader ===> css-loader ===> style-loader


处理Styl资源

1、需要的loader

  • stylus-loader:负责将 Styl 文件编译成 Css 文件

  • css-loader : 负责将 Css 文件编译成 Webpack 能识别的模块

  • style-loader: 动态创建一个 Style 标签,里面放置 Webpack 中 Css 模块内容,样式就会以 Style 标签的形式在页面上生效

2、下载包到项目

npm i stylus-loader -D

css-loader 、style-loader也是必要的依赖包,如果没有下载需要下载。

3、配置loader

module: 
    rules: [
      
        // 用来匹配 .styl 结尾的文件
        test: /\\.styl$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader", "stylus-loader"],
      ,
    ],
  ,

这里的loader执行顺序:stylus-loader ===> css-loader ===> style-loader


处理所有样式资源

处理所有样式资源只需要将上述loader全部下载并添加到配置文件即可。

const path = require("path");

module.exports = 
  entry: "./src/main.js",
  output: 
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  ,
  module: 
    rules: [
      
        test: /\\.css$/,
        use: ["style-loader", "css-loader"],
      ,
      
        test: /\\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      ,
      
        test: /\\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      ,
      
        test: /\\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      ,
    ],
  ,
  plugins: [],
  mode: "development",
;

最后你可以创建你的样式资源文件,并引入main.js中,然后执行npx webpack到浏览器查看样式是否生效即可。

以上是关于webpack处理样式资源的主要内容,如果未能解决你的问题,请参考以下文章

学习Webpack4这一篇就够了

webpack的基础,看懂webpack如何编译bundle everything

React 样式与隔离

浅谈Webpack

webpack

webpack总结