将 Tailwind 与 Webpack 5 结合使用

Question

我当前的 Webpack 5 设置包括以下 CSS 和 SCSS 文件规则：

test: /\.s?css$/,
use: [
    { loader: MiniCssExtractPlugin.loader },
    { loader: 'css-loader', options: { importLoaders: 1 } },
    {
        loader: 'postcss-loader',
        plugins: [
            tailwindcss
        ]
    },
    'sass-loader'
],

目标是：

• 编译SCSS
• 流程顺风
• 加载CSS
• 将 css 分离到文件中

我的 scss 文件包含：

@tailwind base;
@tailwind components;
@tailwind utilities;

但我收到以下错误：

无法加载“C:\dev\project\webpack.config.js”配置
lum[i] = (chan <= 0.039_28) ？陈/12.92：（（陈+0.055）/1.055）** 2.4；
语法错误：无效或意外的标记

相关注意事项：如果我删除 postcss-loader，它会编译，但当然 tailwind 不会包含在 CSS 文件中。

我该如何解决这个问题？

Answer 1

对于像 SASS 这样的顺风预处理器，@tailwind将不起作用。你必须用@import "tailwindcss/"它来代替。例如@import "tailwindcss/base"。

现在跳转到 webpack 配置：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
const { VueLoaderPlugin } = require('vue-loader')
const isProduction = process.env.NODE_ENV == "production";
const stylesHandler = MiniCssExtractPlugin.loader;

const config = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      // template: "index.html",
      template: path.resolve(__dirname, 'public/index.html')
    }),

    new MiniCssExtractPlugin(),
    new VueLoaderPlugin(),

    // Add your plugins here
    // Learn more about plugins from https://webpack.js.org/configuration/plugins/
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.(js|jsx)$/i,
        loader: "babel-loader",
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          stylesHandler,
          "css-loader",
          "postcss-loader",
          "sass-loader"
        ],
      },
      {
        test: /\.css$/i,
        use: [stylesHandler, "css-loader", "postcss-loader"],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
      },

      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
  },
};

module.exports = () => {
  if (isProduction) {
    config.mode = "production";

    config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
  } else {
    config.mode = "development";
  }
  return config;
};

如果你不使用 VueJs，你可以忽略 vue 规则。这是我使用的 devDependency：

    "@babel/core": "^7.17.7",
    "@babel/preset-env": "^7.16.11",
    "@webpack-cli/generators": "^2.4.2",
    "autoprefixer": "^10.4.4",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.0",
    "postcss": "^8.4.12",
    "postcss-loader": "^6.2.1",
    "sass": "^1.49.9",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.0.23",
    "vue-loader": "^17.0.0",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "workbox-webpack-plugin": "^6.5.1"

不要忘记像这样配置 postCSS：

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

现在将 scss 文件导入到 main.js 或 index.js。对于分离CSS，你可以按照这篇文章： https ://survivejs.com/webpack/styling/separating-css/

享受。