Webpack处理样式资源

用户4556737272865
91 阅读5分钟

一、介绍

Webpack 本身不具备直接识别和处理样式资源的能力，因此，我们需要借助 Loader 来帮助 Webpack 解析和转换这些资源。

为了找到合适的 Loader，最可靠的方式是查阅 Webpack 的官方文档 并根据文档指引进行安装和使用。

如果官方文档中没有找到所需信息，也可以尝试在 GitHub 社区中搜索。

二、有哪些常用的写样式资源的工具

请注意，这个表格提供了一些关键特性的对比，但可能并不涵盖所有细节。每种预处理器都有其独特的特性和用例，因此在实际选择时，建议深入了解每个工具的文档和社区资源。

特性/工具CSSLESSSassStylus
基础原生CSS，无需预处理CSS扩展语言，需预处理CSS扩展语言，需预处理CSS扩展语言，需预处理
变量现代浏览器支持，注意版本支持全局和局部变量支持全局和局部变量支持全局和局部变量
嵌套规则不支持支持支持支持
混合（Mixins）不支持支持，可带参数和默认参数支持，可带参数和默认参数支持，可带参数和默认参数
继承通过类名复用样式通过混合实现通过混合实现通过混合实现
运算不支持支持基本的数学运算支持数学运算、颜色运算等支持数学运算、颜色运算等
函数内置函数有限可自定义函数可自定义函数，功能更强大可自定义函数，语法简洁
条件语句不支持不支持支持（通过@if、@else等）支持（通过if、else等）
循环不支持不支持支持（通过@for、@each等）支持（通过for、each等）
导入（Import）支持，但无合并功能支持，可合并文件支持，可合并文件，有分块导入功能支持，可合并文件
扩展/占位符不支持不支持支持（通过%placeholder定义）不支持，但可通过混合实现类似功能
颜色处理有限的颜色函数支持颜色运算和函数支持丰富的颜色运算和函数支持颜色运算和函数
社区和生态系统广泛使用和支持相对较小，但增长中广泛使用，生态系统丰富较小，但有一些忠实用户
学习曲线最低，因为是原生CSS较低，与CSS语法相似中等，需要学习新的语法和特性较低，语法简洁，但可能需要适应

三、样式开发工具补充

  1. PostCSS：

    • 一个用JavaScript编写的工具，用于转换CSS代码。
    • 提供了许多插件，可以扩展CSS的功能，如自动添加浏览器前缀、压缩CSS等。
    • 与LESS和Sass不同，PostCSS本身不是一个预处理器语言，而是一个用于处理CSS的工具链。

  2. styled-components：

    • 一个用于React的CSS-in-JS库，允许你将样式作为组件来编写。
    • 提供了样式隔离、动态样式、主题等功能。
    • 样式是基于JavaScript对象编写的，可以方便地与其他JavaScript逻辑结合。

  3. Tailwind CSS：

    • 一个实用主义的CSS框架，提供了一套预定义的CSS类，用于快速构建用户界面。
    • 强调“原子化”的CSS类，每个类只负责一个样式属性。
    • 可以通过组合这些类来创建复杂的样式，而无需编写自定义的CSS规则。

  4. Emotion：

    • 另一个CSS-in-JS库，类似于styled-components，但提供了更多的灵活性和功能。
    • 支持SSR（服务器端渲染）和CSS-in-JS的多种模式（如对象样式、模板字符串等）。
    • 可以与React、Vue等框架结合使用。

  5. CSS Modules：

    • 一种将CSS作用域化到单个文件或组件的方法。
    • 通过为选择器添加唯一的哈希值前缀，实现了样式隔离。
    • 可以与各种构建工具和框架结合使用。

  6. Atomic CSS：

    • 一种将CSS拆分为最小单位的样式编写方法。
    • 每个样式属性都被定义为一个单独的类，可以通过组合这些类来创建复杂的样式。
    • 类似于Tailwind CSS，但提供了更少的预设类和更大的灵活性。

四、处理样式资源

要处理 CSS 资源，我们需要进行以下步骤：

  1. 安装 Loader：
    通过 npm 安装 css-loader、style-loader、less-loader、sass-loader、stylus-loader，命令如下：

    	npm install css-loader style-loader less-loader sass-loader stylus-loader --save-dev

    请注意，处理 CSS 文件通常需要这两个 Loader 协同工作。

  2. 功能介绍：

    • less-loader：:负责将 less 文件编译成css。
    • sass-loader：:负责将 sass 文件编译成css。
    • stylus-loader：:负责将 stylus 文件编译成css。
    • css-loader：负责将 css 编译成 Webpack 能够识别的模块。这一步骤将 css 文件中的样式转换为 JavaScript 模块，以便 Webpack 能够处理。
    • style-loader：在运行时动态创建一个 <style> 标签，并将 Webpack 中的 css 模块内容插入到这个标签中。这样，样式就会以 <style> 标签的形式在页面上生效，实现样式的动态加载和应用。

五、示例

仅演示css，less、sass、stylus类似。

  1. 新增文件src/global.css
.body {
    background-color: cadetblue;
}
  1. 修改main.js文件内容
import { join } from "./js/hello";
// 新增一行引入CSS
import './global.css';

join([1,2,3], ",");
  1. 观察控制台输出（目前没有使用 loader）
ERROR in ./src/global.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .body {
|     background-color: cadetblue;
| }
 @ ./src/main.js 2:0-22
  1. 添加loader配置，修改 webpack.config.js
const path = require('path');
const isProduction = process.env.NODE_ENV == 'production';
const config = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [],
    module: {
        rules: [
            // 以下为 loader 配置内容
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.jsx', '.js', '...'],
    },
};

module.exports = () => {
    if (isProduction) {
        config.mode = 'production';
    } else {
        config.mode = 'development';
    }
    return config;
};
  1. 再次打包(成功)，将打包产物复制到一个html文件中，在浏览器打开。
<!DOCTYPE html>
<html>
  <head>
    <title>MarsCode</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <h1>Hello HTML/CSS/JS!</h1>
    <script>
      <!--你的打包产物-->
    </script>
  </body>
</html>

image.png

avatar
文章
阅读
粉丝