在NX Workspace（WebPack）中使用香草奖励
#css #typescript #vanillaextract #nx

概述

最近，我对零连续剧CSS-IN-JS库以及他们带来的性能好处感到好奇。一个相对较新的库是vanilla-extract。因为我喜欢使用nx构建项目，所以我很好奇是否已经支持它，但目前还没有。

这旨在在NX Workspace中的React/WebPack应用中展示一种快速简便的方法来添加对vanilla-extract的支持。

什么是香草摘要？

vanilla-extract是关于打字稿（或javaScript）中的零连接样式表。如果您过去使用过的SASS或更少，您已经知道它们对您的应用程序风格等主题，组织和预处理等事物的强大程度。

设置

让我们创建一个工作区

请参阅下面的命令，以创建NX工作区以及要遵循的选项。

注意：此时NX的当前版本是15.0.1 

npx create-nx-workspace@latest

# Choose your style: Integrated
# What to create in the new workspace: react
# Repository name: vanilla
# Application name: example-web
# Default stylesheet format: CSS
# Enable distributed caching to make your CI faster: No

安装依赖项 

npm i @vanilla-extract/css
npm i --save-dev @vanilla-extract/webpack-plugin

创建自定义WebPack配置

为了增加支持，我们需要做一些事情：

  • 创建一个文件：apps/example-web/webpack.config.js5
  • 添加香草 - 提取生成的CSS规则
  • 在NX已提供的规则数组中预先将这些规则预先
  • 替换规则数组 
// file: apps/example-web/webpack.config.js
const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = (config) => {
  const cssRule = config.module.rules.find((rule) =>
    rule.test.toString().includes('css')
  );

  const rulesWithoutCss = config.module.rules.filter(
    (rule) => !rule.test.toString().includes('css')
  );

  const rules = [
    ...rulesWithoutCss,
    {
      ...cssRule,
      oneOf: [
        {
          test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: require.resolve('css-loader'),
              options: {
                url: false, // Required as image imports should be handled via JS/TS import statements
              },
            },
          ],
        },
        ...cssRules.oneOf,
      ],
    },
  ];

  return {
    ...config,
    plugins: [...config.plugins, new VanillaExtractPlugin()],
    module: {
      ...config.module,
      rules,
    },
  };
};

使用自定义WebPack配置

在文件apps/example-web/project.json中，
找到属性webpackConfig并将其替换为

"webpackConfig": "apps/example-web/webpack.config.js",

创建和使用您的样式

创建文件apps/example-web/src/app/app.css.ts 

import { style } from '@vanilla-extract/css';

export const container = style({
  padding: 10,
  background: 'blue',
});

修改文件：apps/example-web/src/app/app.tsx 

import { container } from './app.css';
import NxWelcome from './nx-welcome';

export function App() {
  return (
    <div className={container}>
      <NxWelcome title="example-web" />
      <div />
    </div>
  );
}

export default App;

运行应用程序 

npm run start example-web

多数民众赞成！

  • 您现在将看到页面的背景是蓝色的。不是最漂亮的事情，而只是为了证明它有效。
  • 检查网络后，您可以找到具有生成样式的CSS文件vendor.css（此时和此示例）

您的下一步

  • 尝试一下
  • 进行自己的自定义，例如更改导出的CSS文件名，等等。
  • 留下反馈；我很想看看如何改进。

请参阅示例存储库以获取完整的解决方案

https://github.com/lwhiteley/nx-vanilla-extract-setup