什么是 postcss-typescript-css？
postcss-typescript-css 是一个可以帮助开发者在 TypeScript 项目中使用 PostCSS 的工具包。使用此工具包，您可以在 TypeScript 项目中编写 CSS，并使用 PostCSS 在构建时进行自动化处理，如浏览器前缀、CSS 变量、嵌套选择器等等。
如何安装 postcss-typescript-css？
您可以使用 npm 在您的项目中安装 postcss-typescript-css。安装命令如下所示：
npm i postcss-typescript-css --save-dev
如何使用 postcss-typescript-css？
安装完成后，在您的工程里创建一个名为 postcss.config.js 的文件，并在其中配置 postcss-typescript-css：
-- -------------------- ---- -------
-- -----------------
----- ------- - -------------------
----- ------------- - ----------------------------------
-------------- - -
-------- -
---------------
-- --- --
---
-- --- ------- -- --
-
-现在，您可以在您的 TypeScript 源代码中编写 CSS 代码，并以 TypeScript 模块的形式导入到您的代码中：
-- -------------------- ---- -------
-- ----------
------ ----- --------- - ------------
------ ------- -
------------- -
------ ----
---------- -----
-
--我们可以在 TypeScript 文件中使用模块中导出的样式类名：
// foo.ts
import fooCss, { className as fooClassName } from './foo.css';
console.log(fooCss); // 输出 CSS 代码字符串
console.log(fooClassName); // 输出 foo-class如何配置 postcss-typescript-css？
postcss-typescript-css 为开发者提供了一系列配置项，使得开发者可以根据自己的需求来配置插件行为。下面是一系列配置项以及其作用：
modules: 指定是否启用 CSS 模块化。当启用 CSS 模块化时，postcss-typescript-css会将形如.foo之类的选择器替换成具有唯一标识的选择器，例如.foo__123-abc。默认值为false。postcss.plugins: 指定其他的 PostCSS 插件列表，用逗号分隔。这些插件将在postcss-typescript-css处理完后调用，按照列表顺序依次调用。默认值为[]。postcssOptions: 指定 PostCSS 的配置项。默认值为{}。typescript: 指定 TypeScript 编译器的配置项以及路径。默认值为：-- -------------------- ---- ------- - ----------------- ------------------ ---------------- - ------- --------- ----------------- ------- ------- --------- ---- -------- ---- ------- ---------- ---------- ----- ----------------------------- ----- ----------------------- ----- ---------------------- ----- -------------- ----- -- -
示例代码
为了更好地了解 postcss-typescript-css 的使用方法，这里提供一份示例代码。在该代码中，我们使用 postcss-nesting 插件处理选择器嵌套，使用 postcss-css-variables 插件处理 CSS 变量：
-- -------------------- ---- -------
-- -----------------
----- ------- - -------------------
----- ------------- - ----------------------------------
----- ------- - ---------------------------
----- --------- - ---------------------------------
-------------- - -
-------- -
---------------
-------- -----
-------- -
-------- --------- ----------
-
--
-
---- -------------------- ---- -------
-- -------------
------ ----- ------- - ---------
------ ----- ---- - -------
------ ----- ----- - --------
------ ------- -
----------- -
--------- ---------
---- -----
----- -----
-
-------- -
------ -----
------- -----
-
--------- -
------------ -----
---------- -----------------------
------ ---------------------
-
---- -------------------- ---- ------- -- ------- ------ ------- - -------- ----- ----- - ---- --------------- ----- ------ - --------------------------------- ---------------- - -------- ---------------- - - ---- --------------- ---------- ---------------- ----- ----------------------- ------------- -- ---------------------------------- --------------------
这是一个简单的例子，但是可以让您更好地了解 postcss-typescript-css 的用法。当然，如果您对于 PostCSS 和 TypeScript 的使用还不是很熟悉，需要您先了解一下相关的知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aaa81e8991b448d8360