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-run-all。

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

from datetime import timedelta


d=timedelta(minutes=5)
app.config['PERMANENT_SESSION_LIFETIME']=d

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

无法使PostCSS与Webpack一起使用

1 个答案: