npm run build 和 watch 非常慢答案

【问题标题】：Npm run build and watch extremely slownpm run build 和 watch 非常慢
【发布时间】：2021-03-10 18:35:18
【问题描述】：

我正在尝试创建一个基本的 Tailwind 启动项目，当我尝试运行 npm run build 或 npm run watch 命令时，大约需要 30-60秒做出改变。这是我的设置：

package.json:

{
  "name": "base",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "postcss css/style.css -o public/build/style.css",
    "watch:css": "onchange 'css/*.css' -- npm run build"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^10.0.3",
    "postcss": "^8.1.10",
    "postcss-cli": "^8.3.0",
    "tailwindcss": "^2.0.1",
    "watch": "^1.0.2"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^3.0.0",
    "cssnano": "^4.1.10",
    "onchange": "^7.1.0"
  }
}

postcss.config.css：

const purgecss = require('@fullhuman/postcss-purgecss')

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('cssnano')({
           preset: 'default',
       }),
    // purgecss({
    //    content: ['./**/*.html'],
    //    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    //  })
  ]
}

--public
    build
        main.css
   index.html
--src
    css
        tailwind.css
--package.json
--postcss.config.js
--tailwind.config.js

【问题讨论】：

标签： html css npm tailwind-css postcss

【解决方案1】：

build 应该是postcss public/build/main.css -o src/css/tailwind.css，删除对@fullhuman/postcss-purgecss 的任何引用，然后查看https://tailwindcss.com/docs/installation

【讨论】：

【解决方案2】：

你能检查一下下面的代码吗？希望它对你有用。您需要修改您的 package.json 代码，如下面的代码。

"scripts": {
  "start": "npm run watch:css && react-scripts start",
  "build": "npm run build:css && react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "build:css": "postcss css/style.css -o public/build/style.css",
  "watch:css": "postcss css/style.css -o public/build/style.css"
}

之后，您需要使用以下命令重新启动您的项目，以便自动构建并查看您的 tailwind 文件。

npm start

【讨论】：