使 PostCSS 与 Webpack 一起工作时遇到问题

Question

我正在尝试让 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'),
  ],
};

Package.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"
}
}

Answer 1

显然，离开这个让我跳出框框思考一下。我查看了 Coding-Coach 对运行 Tailwind 所做的事情，他们甚至没有使用 Webpack。所以，我模仿了他们的方法。我安装了 postcss-cli 和 npm-运行-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 的东西。

使 PostCSS 与 Webpack 一起工作时遇到问题

Trouble getting PostCSS to work with Webpack

webpack

postcss

tailwind-css