0

在 Laravel 8 / Tailwind CSS v2.1 应用程序中，我制作了不同的布局。所以在`webpack.mix.js 中，我定义了自定义类文件。

const mix = require('laravel-mix');

const tailwindcss = require('tailwindcss');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/backend.css', 'public/css', [
        require("tailwindcss"),
    ])
    .postCss('resources/css/profile.css', 'public/css', [
        require("tailwindcss"),
    ])
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.config.js')],
    });

任何*.css文件都有独特的类，但它们都有一些共同的类。我想app.css用一些共同的定义来定义一些共同点，并在backend.css定义中说：

.admin_main_color {
    @apply text-gray-300 bg-green-900;
}

修改： 因为那是 laravel 项目，我没有 HTML 文件，但有 Blade.php 文件。所以我尝试下一步： 在 webpack.mix.js 我添加了 app.css ：

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require("tailwindcss"),
    ])
    .postCss('resources/css/backend.css', 'public/css', [
        require("tailwindcss"),
    ])
    .postCss('resources/css/profile.css', 'public/css', [
        require("tailwindcss"),
    ])
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.config.js')],
    });

在 resources/views/layouts/backend.blade.php 我添加了 app.css（在 backend.css 之前）：

<title id="app_title">{{ config('app.name', 'Laravel') }}</title>

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/backend.css') }}" rel="stylesheet">

在 resources/css/app.css 我有：

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

@layer base {

    .app_main_color { // in some cases I need to possibility to overwrite class in frontend.css/backend.css
        @apply text-yellow-300 bg-red-900;
    }

但是当我尝试在 resources/css/backend.css ：

@tailwind base;
@tailwind components;
@tailwind utilities;
@import app.css;


@layer base {

    .test_class {
        @apply text-gray-300 bg-red-800;
    }

    /*.app_main_color {*/
    /*    @apply text-gray-300 bg-green-900;*/
    /*}*/

如果要在上面留下评论 3 行，我在控制台中收到错误：

 (23:31) /mnt/_work_sdb8/wwwroot/lar/tAdsBack/resources/css/backend.css The `app_main_color` class does not exist. If you're sure that `app_main_color` exists, make sure that any `@import` statements are being properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

与 :

@import app.css;

没有帮助。我该怎么做？我希望我清楚地解释了我想要什么......

这将覆盖我能做到这一点，以及如何做到这一点admin_main_color中的定义吗？app.css.

修改2： 在带有引导程序的laravel5-7中，我有定义变量的文件resources/sass/_variables.scss，在文件resources/sass/app.scss中我有行：

@import "node_modules/font-awesome/scss/font-awesome";
@import 'variables';

我可以在我的应用程序中使用类似的方式吗？如果是，如何？

修改3：

@import app_main_color;
/*@import app_main_color from app.css;*/

@layer base {

    h3 {
        @apply text-xl font-bold;
        padding:4px;
    }
    h4 {
        @apply text-lg font-bold;
        padding:3px;
    }

    /*.app_main_color {*/
    /*    @apply text-gray-300 bg-green-900;*/
    /*}*/



    .admin_page_container_wrapper {
        @apply flex-1 justify-items-start justify-self-start app_main_color  p-1 m-0;
    }

但我得到了错误：

(35:62) /mnt/_work_sdb8/wwwroot/lar/tAdsBack/resources/css/backend.css The `app_main_color` class does not exist. If you're sure that `app_main_color` exists, make sure that any `@import` statements are being properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

  33 | 
  34 |     .admin_page_container_wrapper {
> 35 |         @apply flex-1 justify-items-start justify-self-start app_main_color  p-1 m-0;
     |                                                              ^
  36 |     }

导入 app_main_color 的感觉是它在其他类中使用，例如在 admin_page_container_wrapper 类的定义中，但我找不到如何制作它。

4

1 回答 1

3

如果我需要使用 tailwindcss 编译两个不同的 CSS 文件并定义新的变量或类，我会创建 app.css 和 backend.css 以及 main.css。

main.css：

.app_main_color{
    @apply text-xl font-medium text-yellow-300 bg-red-900;
}

应用程序.css：

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

@layer base { 
    .new_class{
        @apply app_main_color text-green-400 ;
    }
}

后端.css：

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

@layer components {
.app_main_color{
    @apply text-xl font-medium text-yellow-300 bg-green-900;
  }
}
@layer base { 
    .new_class{
    @apply app_main_color text-blue-400;
    }
}

现在要让应用程序和后端使用 main 中定义的类，您需要将 main 作为组件添加到 tailwind.config.js。您可以使用css-in-js-syntax或加载 main.css 文件，如下所示：

const defaultTheme = require('tailwindcss/defaultTheme');
const plugin = require('tailwindcss/plugin')
const fs = require("fs")
const postcss = require('postcss')
const postcssJs = require('postcss-js')
const css = fs.readFileSync("./resources/css/main.css", "utf8")
const parsedCss = postcss.parse(css)

const root = postcssJs.objectify(parsedCss)
module.exports = {
    purge: [
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    variants: {
    },

    plugins: [
        require('@tailwindcss/forms'),
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
        plugin(function ({ addComponents }) {
            addComponents(root)

        })
    ],
};

在应用程序或后端文件中，您可以定义新的或更改类，因为后端正在更改 app_main_color 类，但应用程序只是在使用它。

此外，您不需要同时在 html 文件中包含应用程序和后端。加载每条路线。

于 2021-05-14T14:07:04.177 回答