使用 Laravel Mix 和 Tailwind 编译 SASS 时出现问题

Question

我正在尝试在我的 mix.config.js 中编译 SASS 文件，但我没有成功。

talwind.config.js

const primaryColors = require("./colors");

module.exports = {
    purge: [
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    darkMode: "class",
    theme: {
        borderColor: theme => ({
            ...theme("colors"),
            DEFAULT: primaryColors.gray["300"]
        }),
        extend: {
            colors: {
                ...primaryColors,
                theme: {
                    1: "#1C3FAA",
                    2: "#F1F5F8",
                    3: "#2E51BB",
                    4: "#274AB7",
                    5: "#DEE7EF",
                    6: "#D32929",
                    7: "#365A74",
                    8: "#D2DFEA",
                    9: "#91C714",
                    10: "#3160D8",
                    11: "#F78B00",
                    12: "#FBC500",
                    13: "#7F9EB9",
                    14: "#E6F3FF",
                    15: "#8DA9BE",
                    16: "#607F96",
                    17: "#FFEFD9",
                    18: "#D8F8BC",
                    19: "#2449AF",
                    20: "#395EC1",
                    21: "#C6D4FD",
                    22: "#E8EEFF",
                    23: "#1A389F",
                    24: "#163296",
                    25: "#C7D2FF",
                    26: "#15329A",
                    27: "#203FAD",
                    28: "#BBC8FD",
                    29: "#284EB2",
                    30: "#98AFF5"
                }
            },
            fontFamily: {
                roboto: ["Roboto"]
            },
            container: {
                center: true
            },
            maxWidth: {
                "1/4": "25%",
                "1/2": "50%",
                "3/4": "75%"
            },
            screens: {
                sm: "640px",
                md: "768px",
                lg: "1024px",
                xl: "1280px",
                xxl: "1600px"
            },
            strokeWidth: {
                0.5: 0.5,
                1.5: 1.5,
                2.5: 2.5
            }
        }
    },
    variants: {
        extend: {
            zIndex: ["responsive", "hover"],
            position: ["responsive", "hover"],
            padding: ["responsive", "last"],
            margin: ["responsive", "last"],
            borderWidth: ["responsive", "last"],
            backgroundColor: ["last", "first", "odd", "responsive", "hover", "dark"],
            borderColor: ["last", "first", "odd", "responsive", "hover", "dark"],
            textColor: ["last", "first", "odd", "responsive", "hover", "dark"],
            boxShadow: ["last", "first", "odd", "responsive", "hover", "dark"],
            borderOpacity: ["last", "first", "odd", "responsive", "hover", "dark"],
            backgroundOpacity: ["last", "first", "odd", "responsive", "hover", "dark"]
        }
    }
};

webpack.config.js

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
    }
};

webpack.mix.js

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


const tailwindcss = require('tailwindcss')

mix.js('resources/js/app.js', 'public/dist/js')
    .sass('resources/js/assets/sass/app.scss', 'public/dist/css', {}, [
        require('tailwindcss')
    ])
    .options({
        processCssUrls: false,
        postCss: [
            tailwindcss('./tailwind.config.js'),
        ]
    })
    .autoload({ 'cash-dom': ['$', 'cash'] })
    .copyDirectory('resources/js/assets/images', 'public/dist/images')
    .copyDirectory('node_modules/summernote/dist/font/summernote.woff', 'public/dist/fonts/summernote')
    .browserSync({
        proxy: 'evpiu.test',
        files: ['resources/**/*.*']
    }).webpackConfig(require('./webpack.config'));


if (mix.inProduction()) {
    mix.version();
}

我收到以下error。有谁知道如何解决这个问题？我无法让它以任何方式工作。我不是 Laravel 混合专家，所以这对我来说是个大问题。

Answer 1

根据错误所说，我认为您不应该将"dark" 添加到变体中-> 扩展。