TailwindCSS、Webpack 和 Sass：在 CSS 文件中使用时找不到类，但在内联 HTML 时工作正常

Posted 2023-03-07

【中文标题】TailwindCSS、Webpack 和 Sass：在 CSS 文件中使用时找不到类，但在内联 HTML 时工作正常

【英文标题】：TailwindCSS, Webpack and Sass: class cannot be found while using in CSS file but working fine when inline HTML

【发布时间】：2020-11-26 14:05:07

【问题描述】：

我有模块化 CSS（使用 Sass），当我将 Tailwind 的 @apply 与某些类一起使用时，我的 webpack 会抛出错误。其中一些有效，有些无效，我不知道为什么。它在 html 中内联工作，但不在 CSS 文件中。

图库.scss

.c-gallery-thumbnails 
  @apply space-x-3;

base.scss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

import "gallery"

网络包

module: 
            rules: [
                
                    test: /\.[ps]?css$/,
                    use: ExtractTextPlugin.extract(
                        use: [
                            'css-loader',
                            'resolve-url-loader',
                            
                                loader: 'postcss-loader',
                                options: 
                                    ident: 'postcss',
                                    plugins: [
                                        require('postcss-import'),
                                        require('tailwindcss'),
                                        require('autoprefixer'),
                                    ],
                                ,
                            ,
                            'sass-loader',
                        ],
                    ),
                ,
...

还有错误：

@apply 不能与.space-x-3 一起使用，因为.space-x-3 要么找不到，要么它的实际定义包含一个伪选择器，如:hover、:active 等。如果你确定.space-x-3 存在，请确保所有@import 语句都被正确处理之前 Tailwind CSS 参见 s 你的 CSS，因为@apply 只能用于同一 CSS 树中的类。

【参考方案1】：

请尝试导入.css 文件，其中space-x-3 css 规则在gallery.scss 中定义。

【参考方案2】：

阅读：https://tailwindcss.com/docs/using-with-preprocessors/

为了获得最有凝聚力的开发体验，建议您只使用 PostCSS。