为啥 tailwindcss 没有在 webpack 中使用 sass 文件正确导入所有组件？

Posted 2023-03-07

【中文标题】为啥 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 文件

【参考方案1】：

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