无法让 PostCSS 与 Webpack 一起使用

Posted 2023-03-07

【中文标题】无法让 PostCSS 与 Webpack 一起使用

【英文标题】：Trouble getting PostCSS to work with Webpack

【发布时间】：2019-05-17 23:03:39

【问题描述】：

我正在尝试让 Webpack 与 PostCSS 一起工作，但遇到了麻烦。它可以很好地缩小 javascript，但对 CSS 没有任何作用。我已经根据示例尝试了各种配置，但无法使其正常工作。

我这样做的主要原因是让 PostCSS 让 TailwindCSS 在构建时工作，而不必运行 CLI 命令。

Webpack 配置：

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = 
  mode: "development",
  entry: 
    app: './src/main.ts',
    vendor: ['./angular']
  ,
  output: 
    path: path.join(__dirname, 'src/js'),
    filename: '[name].min.js'
  ,
  resolve: 
    extensions: ['.ts', '.js', '.json', '.css']
  ,
  module: 
    rules: [
      
        test: /\.js$/,
        exclude: /node_modules/,
        use: 
          loader: "babel-loader"
        
      ,
      
        test: /\.tsx?$/,
        loader: "ts-loader"
      ,
      
        test: /\.css$/,
        use: [
          "style-loader",
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader"
        ],
      ,
    ]
  ,
  plugins: [
    new MiniCssExtractPlugin(
      filename: "src/styles.css",
      chunkFilename: "src/css/main.css"
    )
  ]

PostCSS 配置：

var tailwindcss = require('tailwindcss');

module.exports = 
  plugins: [
      tailwindcss('./tailwind.config.js'),
      require('autoprefixer'),
  ],
;

包.json

"name": "ateamcoders-app",
"version": "0.0.0",
"scripts": 
"ng": "ng",
"watch": "webpack --watch --progress --profile",
"server": "webpack-dev-server --inline --progress --port 8080",
"start": "npm run server",
"build": "ng build",
"test": "ng test",
"lint": "tslint --force \"src/**/*.ts\"",
"e2e": "ng e2e"
,
"private": true,
"dependencies": 
"@angular/animations": "~7.1.0",
"@angular/common": "~7.1.0",
"@angular/core": "~7.1.0",
"@angular/forms": "~7.1.0",
"@angular/platform-browser": "~7.1.0",
"@angular/platform-browser-dynamic": "~7.1.0",
"@angular/router": "~7.1.0",
"@babel/core": "7.2.0",
"core-js": "^2.5.4",
"eslint": "5.10.0",
"rxjs": "~6.3.3",
"ts-loader": "5.3.1",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
,
"devDependencies": 
"@angular-devkit/build-angular": "~0.11.0",
"@angular/cli": "~7.1.2",
"@angular/compiler": "~7.1.0",
"@angular/compiler-cli": "~7.1.0",
"@angular/language-service": "~7.1.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"autoprefixer": "9.4.2",
"babel-loader": "8.0.4",
"codelyzer": "~4.5.0",
"cross-env": "5.2.0",
"css-loader": "2.0.0",
"enhanced-resolve": "4.1.0",
"extract-text-webpack-plugin": "3.0.2",
"html-webpack-plugin": "3.2.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"mini-css-extract-plugin": "0.5.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
"postcss": "7.0.6",
"postcss-loader": "3.0.0",
"protractor": "~5.4.0",
"tailwindcss": "0.7.2",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.6",
"uglifyjs-webpack-plugin": "2.0.1",
"webpack": "4.27.1",
"webpack-cli": "3.1.2",
"webpack-dev-server": "3.1.10"

【参考方案1】：

显然离开这个让我跳出框框思考一下。我查看了 Coding-Coach 为运行 Tailwind 所做的事情，他们甚至没有使用 Webpack。所以，我反映了他们的做法。我安装了 postcss-cli 和 npm-run-all。

然后我将 package.json 修改为如下所示：

"watch": "npm-run-all --parallel watch:js watch:css",
"watch:js": "webpack --watch --progress --profile",
": "postcss src/styles.css -o src/css/main.css -w",

然后我可以“npm run watch”，它通过 Webpack 压缩 JS，并使用 postcss-cli 完成 Tailwind 的工作。