Tailwind CSS, Webpack и Sass: класс не может быть найден при использовании в файле CSS, но работает нормально при встроенном HTML - PullRequest
Новая
       166

Tailwind CSS, Webpack и Sass: класс не может быть найден при использовании в файле CSS, но работает нормально при встроенном HTML

0 голосов
/ 06 августа 2020

У меня модульный CSS (с использованием Sass), и мой веб-пакет выдает ошибки, когда я использую @apply Tailwind с некоторыми классами. Некоторые из них работают, некоторые нет, и я не могу понять, почему. Он работает в HTML, но не в CSS файле.

gallery.s css

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

base.s css

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

import "gallery"

webpack 

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, et c. Если вы уверены, что .space-x-3 существует, убедитесь, что все операторы @import правильно обрабатываются до Tailwind CSS см. Ваш CSS, так как @apply может использоваться только для классы в том же CSS дереве.

Ответы [ 2 ]

0 голосов
/ 08 августа 2020

Прочтите это: https://tailwindcss.com/docs/using-with-preprocessors/

Для наиболее целостного опыта разработки рекомендуется использовать исключительно Post CSS.

0 голосов
/ 06 августа 2020

Попробуйте импортировать файл. css, в котором правило space-x-3 css определено в gallery.scss.

...