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

Posted 2023-03-07

【中文标题】使用 Laravel Mix 和 Tailwind 编译 SASS 时出现问题

【英文标题】：Problem compiling SASS with Laravel Mix and Tailwind

【发布时间】：2021-06-16 21:07:26

【问题描述】：

我正在尝试在我的 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 混合专家，所以这对我来说是个大问题。

【参考方案1】：

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

【讨论】：

扩展实用程序时可以添加dark 变体：tailwindcss.com/docs/dark-mode#enabling-for-other-utilities。