为什么 tailwindcss 没有在 webpack 中使用 sass 文件正确导入所有组件？答案

【问题标题】：Why tailwindcss doesnot import all the component correctly using sass files in webpack?为什么 tailwindcss 没有在 webpack 中使用 sass 文件正确导入所有组件？
【发布时间】：2021-12-10 03:15:59
【问题描述】：

学完tailwindcss，想试试，在webpack中测试一下。但是与我在构建 tailwindcss 时获得的构建文件相比，webpack 输出文件很小。这是详细信息： colors.scss文件

:root {
    --color-dark-1: #0D1117;
    --color-dark-2: #161B22;
}

postcss.config.js文件

module.exports = {
    plugins: [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer')
    ]
  }

tailwind.config.js文件

module.exports = {
    mode: 'jit',
    purge: [],
    darkMode: false,
    theme: {
      extend: {
        colors:{
            black:{
                100: 'var(--color-dark-1)',
                200: 'var(--color-dark-2)'
            }
        }
      },
    },
    variants: {
        extends:{}
    },
    plugins: [],
  };

app.scss文件

@import './scss/colors';
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

webpack.config.js文件

const { merge } = require('webpack-merge');
const CopyWebpackPlugin = require('copy-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
var common = {
    module : {
        rules : [
            {
                test: [/\.scss$/, /\.css$/],
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.js$/,
                exclude: [/node_modules/],
                use: [
                    {
                        loader: 'babel-loader'
                    }
                ]
            },
            
        ]
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserWebpackPlugin(),
            new CssMinimizerPlugin({})
        ]
    }
};
module.exports = [
    merge(common, {
        devtool: 'eval-source-map',
        entry: [
            __dirname + '/app/app.scss',
            __dirname + '/app/app.js'
        ],
        output: {
            path: __dirname + '/../public',
            filename: 'js/app.js',
        },
        resolve: {
            modules: [
                '/node_modules',
                __dirname + '/app'
            ]
        }
    })
];

输出文件不包括所有 tailwindcss 导入文件。在使用npx tailwindcss init --full 命令生成tailwind.config.js 生成默认配置文件后，它可以完美运行。我想知道为什么在 webpack 中需要生成默认配置文件。使用postcss 构建工作正常，无需生成默认的tailwind.config.js 文件

【问题讨论】：

标签： webpack sass tailwind-css

【解决方案1】：

抱歉，我必须从 tailwind.config.js 文件中删除 mode: 'jit'。 JTI 功能目前处于预览阶段

【讨论】：