npm 包 @stylable/webpack-plugin 使用教程

前置知识

在阅读本文之前，建议具备以下知识：

  • 前端开发基础知识
  • Webpack 的基本用法和配置方法
  • Stylable 前端 CSS 预处理器的基本用法

项目介绍

本文将介绍如何使用 @stylable/webpack-plugin，它是 Stylable 的一个 Webpack 插件，能够将 style 文件转换为对应的 CSS 文件，并将生成的 CSS 文件用于构建输出。

如何安装

可以通过 NPM 安装该插件：

--- ------- ---------- ------------------------

如何使用

使用该插件有两种方法：

  1. 在 Webpack 配置文件中添加该插件
----- -------------- - ----------------------------------------------------------

-------------- - -
  -- ---
  -------- -
    --- ----------------
      ---------- ----- -- ---- --- --
      --------- -
        ----------------------- ----- -- ----------
        --------------- ----- -- ------
        ----------------------- ---- -- ---- --- ----
      -
    --
  -
--
  1. 使用命令行参数添加该插件
------- ------- ------------------------------------ ------------------------------------------- -------- ----------------- -------- ---------------------

注：该方法仅适用于 Webpack 版本 4。

选项配置

该插件提供了一些选项可以进行配置：

名称 类型 默认值 描述
outputCSS boolean false 是否输出 CSS 文件，生成的 CSS 文件将放置在 Webpack 输出的目录中
optimize object {} 优化选项，可以用于删除未使用的组件、注释以及启用 CSS 类名优化
resolve object {} 定义 CSS module 解析，可以用于定义 alias 等选项
injectCSS boolean | object false 将 stylable-runtime 代码注入 HTML，用于开发环境的 CSS 调试
resolve object {} 定义 CSS module 解析，可以用于定义 alias 等选项
safeParser boolean true 是否启用 CSS 解析器的安全模式，用于防止样式注入攻击
filename string [id].css 输出的 CSS 文件名，默认为 Webpack 输出的 chunk 文件名
shortNamespaces object<string, string> {} 定义命名空间映射，用于缩短 CSS 类名

示例代码

为了更好的理解 @stylable/webpack-plugin 的用法，下面将提供一些示例代码。如下面是 Webpack 配置文件的示例代码：

----- -------------- - ----------------------------------------------------------

-------------- - -
  ------ -----------------
  ------- -
    --------- --------------------
  --
  ------- -
    ------ -
      -
        ----- ----------------
        ---- -
          -
            ------- ------------------
            -------- -
              -- ---- ------- ----
            -
          --
          -
            ------- --------------------------
            -------- -
              -- ---- ------- ----
            -
          -
        -
      -
    -
  --
  -------- -
    --- ----------------
      ---------- -----
      --------- -
        ----------------------- ----
      -
    --
  -
--

这个配置文件将会对 .css 和 .styl 文件使用 Stylable，并将样式文件转换为 CSS 和 JS 模块。输出目录中将生成一个 [name].[hash:8].js 和 [name].[hash:8].css。

下面是在 React 项目中如何使用 @stylable/webpack-plugin：

-- -----------------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- -------------- - ----------------------------------------------------------

-------------- - -
  ----- --------------
  -------- -------------------------------
  ------ ------------------
  ------- -
    ----- ----------------------- --------
    --------- ------------
    ----------- ----
  --
  -------- -
    ----------- ------- ------- ------ -------- --------
  --
  ------ ----------
  ------- -
    ------ -
      - ----- ---------- ------- ----------- --
      -
        ----- -----------------------
        ---- ----------------
      --
      -
        ----- ---------
        ---- -
          ---------------
          -
            ------- -------------
            -------- -
              -------------- -
            -
          -
        --
      --
      -
        ----- ----------
        ---- -
          ---------------
          -
            ------- -------------
            -------- -
              -------------- -
            -
          --
          -
            ------- ------------------
            -------- -
              ------------ -----------
              --------- -
                ----------------------- ----
              -
            -
          -
        --
      --
    --
  --
  -------- -
    --- ----------------
      ---------- -----
      --------- -
        ----------------------- ----
      -
    ---
    --- -------------------
      --------- ---------------------
    ---
  --
  ---------- -
    ----- -----
    ----- -----
    -------- -----
    ------------ -----------
    ------------------- -----
    ------ -
      ------- -----------------------
    -
  -
--

本示例中，我们使用了 @stylable/webpack-plugin 将 .styl 文件转换为 CSS 和 Stylable JS 模块，并将生成的 CSS 文件提取到单独的 chunk 中。此外，还演示了如何在 JavaScript 中 import .styl 文件并在组件中使用它。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f056c9a403f2923b035becc

阅读全文

猜你喜欢

  • npm 包 @typhonjs/babel-parser 使用教程

    前言 在现代的前端开发中，babel 解析器是非常重要的一环。而 @typhonjs/babel-parser 是基于 babel 的语法解析器，它提供了一种更加方便的在 JavaScript 中使用...

    4 年前
  • npm 包 socketerrors-papandreou 使用教程

    简介 socketerrors-papandreou 是一个 npm 包，可以用来处理 socket 连接过程中的错误。 该 npm 包提供了多种常见的 socket 连接错误类型，包括超时、连接拒绝...

    4 年前
  • npm包 @types/es6-promisify使用教程

    简介 在使用JavaScript开发应用程序时，我们通常会遇到异步代码的问题。ES6引入了Promise解决异步回调的问题，而@types/es6-promisify是一个非常优秀的npm包，它提供了...

    4 年前
  • npm 包 @gustavnikolaj/find-relations-in-js 使用教程

    在前端开发中，经常需要对数据进行分析和处理，寻找不同数据之间的关联关系，以便更好地进行数据可视化、处理和呈现。npm 包 @gustavnikolaj/find-relations-in-js 就是一...

    4 年前
  • npm 包 sort-order 使用教程

    什么是 npm 包 sort-order？ npm 包 sort-order 是一个轻量级的 JavaScript 库，用于对对象数组进行快速排序。与传统的 Array.sort() 方法不同，sor...

    4 年前
  • npm 包 buffer-events 使用教程

    在前端开发中，我们经常需要处理一些数据流，而 buffer-events 就是一个很好用的 npm 包，它能够帮助我们将数据流转化为事件流，从而更好地处理数据。本篇文章将介绍 buffer-event...

    4 年前
  • npm 包 co-timeout 使用教程

    简介 co-timeout 是一个 Node.js 的模块，旨在延时执行 Promise 对象的封装。该模块使用了 ES6 的 Generator 和 co 这个库来简化异步调用的流程。

    4 年前
  • npm 包 queue-component 使用教程

    队列是计算机科学中用于存储一系列元素的抽象数据类型。队列中的元素按照出现的顺序被逐一加入，先加入的先被移除。前端开发中也涉及到队列的处理，例如需要对一系列请求进行批量处理等。

    4 年前
  • npm 包 wat2wasm 使用教程

    前言 WebAssembly（以下简称 Wasm）已经成为了目前最为流行的跨平台编译目标之一，它可以以二进制格式在 Web 端运行，也可以在各种不同架构的设备上运行，而且性能也非常优秀。

    4 年前
  • npm 包 chacha20-universal 使用教程

    前言 随着互联网技术的发展，前端应用的安全性也越来越成为人们关注的焦点。Chacha20-universal 是一款在前端应用开发中可供选择的加密算法，通过使用它，我们可以更好地保护前端应用和数据的安...

    4 年前
  • npm 包 sha-test 使用教程

    简介 在前端技术中，SHA（Secure Hash Algorithm，安全哈希算法）用于将数据进行加密处理，以确保在传输过程中数据不受到未授权访问或篡改的风险。npm 包 sha-test 就是一个...

    4 年前
  • npm 包 sha512-wasm 使用教程

    介绍 在前端开发中，加密和解密是必不可少的一部分。使用 SHA-512 加密算法，可以使密码更加安全。而在 npm 上，提供了一个 sha512-wasm 的包，可以以更快的速度进行 SHA-512 ...

    4 年前
  • npm 包 prebuildify-cross 使用教程

    前言 前端开发者们，是否在开发过程中遇到过需要编译原生模块的情况？如果遇到过，那么您一定会觉得烦恼。因为，针对不同操作系统和 CPU 架构，需要分别编译，这很麻烦。

    4 年前
  • npm 包 level-supports 使用教程

    LevelDB 是一款高性能的键值存储引擎，可以在各种场景下使用。在 Node.js 中，可以通过 npm 包 "level" 来方便地使用 LevelDB 。而 "level-supports"是一...

    4 年前
  • npm 包 Trickle 使用教程

    什么是 Trickle？ Trickle 是一个基于 Node.js 的网络流控制模块，可以用于限制网络上传和下载的速度。通过 Trickle，开发者可以控制特定的网络流，比如上传或下载文件、发送或接...

    4 年前
  • npm 包 contributors-from-git 使用教程

    前言 在开发 npm 包时，我们常常需要了解该包的贡献者列表。如果你使用 git 进行版本控制，那么可以通过 git 命令获取贡献者列表。不过，如果能够将其封装成 npm 包，那么可以方便地在项目中使...

    4 年前
  • npm 包 deep-dot 使用教程

    在前端开发中，经常需要操作对象的嵌套属性。例如，我们需要获取 user.contact.address.city 这个属性的值，该如何操作呢？通常的做法是通过链式操作来获取，如下所示： ----- -...

    4 年前
  • npm 包 xastscript 使用教程

    简介 xastscript 是一个用于构建抽象语法树（AST）的工具，使用类似与 HTML 的语法，同时支持扩展语法，可以将语法解析成任意类型的抽象语法树。本文将介绍如何安装和使用这个 npm 包。

    4 年前
  • npm 包 xast-util-from-xml 使用教程

    前言 xast-util-from-xml 是一个 npm 包，它提供了一个将 XML 转换为 XAST 的工具。XAST 可以被作为抽象语法树（AST）用于表示 XML 文档。

    4 年前
  • npm 包 closest-package 使用教程

    在前端开发过程中，我们常常需要引入各种 npm 包来扩展项目的功能。不过，有时候我们需要引入的包并不在我们的项目根目录下，而是在父级目录或者其他目录中。在这种情况下，我们就需要使用 npm 包 clo...

    4 年前

相关推荐

    暂无文章