Combinaison d'emballage CSS avec Sass avec webpack

Question

Je me lance un peu d'avancer CSS pour travailler avec Sass et WebPack. Il semble que la configuration PostCSS pour Tailwind ne fait rien vraiment en termes de traitement @tailwind preflight, @tailwind components et @tailwind utilities

Ma configuration est la suivante:

Layout.scss

@import "~tailwindcss/preflight.css";
@import "~tailwindcss/components.css";

.my-class {
    @apply text-blue;    
    @apply border-red;
}

@import "~tailwindcss/utilities.css";

entrée.js

import '../css/src/layout.scss';

postcss.config.js

const tailwindcss = require('tailwindcss');
const purgecss = require('@fullhuman/postcss-purgecss');
const cssnano = require('cssnano');
const autoprefixer = require('autoprefixer');

module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        cssnano({
            preset: 'default',
        }),
        purgecss({
            content: ['./views/**/*.cshtml']
        }),
        autoprefixer
    ]
 }

webpack.config.js

// NPM plugins
const autoprefixer = require('autoprefixer');
const WebpackNotifierPlugin = require('webpack-notifier');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
    entry: {
        main: './scripts/entry.js'
    },
    output: {
        filename: '[name].bundle.js',
        publicPath: './'
    },
    watch: false,
    externals: {
        jquery: 'jQuery'
    },
    mode: 'development',
    plugins: [
        // Notify when build succeeds
        new WebpackNotifierPlugin({ alwaysNotify: true }),

        // Extract any CSS from any javascript file to process it as LESS/SASS using a loader
        new MiniCssExtractPlugin({
            fileame: "[name].bundle.css"
        }),

        // Minify CSS assets
        new OptimizeCSSAssetsPlugin({}),

        // Use BrowserSync plugin for file changes. I.e. if a CSS/SASS/LESS file changes, the changes will be injected directly in the browser with no page load
        new BrowserSyncPlugin({
            proxy: 'mysite.local',
            open: 'external',
            Host: 'mysite.local',
            port: 3000,
            files: ['./dist/main.css', './views', './tailwind.js']
        },
            {
                // disable reload from the webpack plugin since browser-sync will handle CSS injections and JS reloads
                reload: false
            })
    ],
    module: {
        rules: [
            {
                // Transpile ES6 scripts for browser support
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },            
            {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff)$/,
                use: [
                    {
                        loader: 'file-loader'
                    }
                ]
            },       
            {
                // Extract any SCSS content and minimize
                test: /\.scss$/,
                use: [                    
                    MiniCssExtractPlugin.loader,
                    { loader: 'css-loader' },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [autoprefixer()]
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {                            
                            plugins: () => [autoprefixer()]
                        }
                    } 
                ]
            },
            {
                // Extract any CSS content and minimize
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    { loader: 'postcss-loader' }
                ]
            }            
        ]
    }
};

Quand j'exécute Webpack, tout fonctionne juste bien, mais le contenu de /dist/main.css est:

@tailwind preflight;@tailwind components;@tailwind utilities;.my-class{@apply text-blue;@apply border-red}

Je soupçonne que cela est lié à la chargeur (ordre des), mais je ne peux pas sembler comprendre pourquoi il ne devient pas traité correctement.

Est-ce que quelqu'un sait ce que je fais mal ici? :-)

Merci d'avance.

Answer 1

Il existe une extension appelée TailWindcss-Transpiler qui compilait vos fichiers layout.tailwind.scss dans des fichiers PURE CSS.it également optimiser les fonctionnalités. J'espère que cela sera utile.

Pour le code vs https://marketplace.visualstudio.com/items?itemname=sudoaugustin.tailwindcsss-transpiler

Pour Atom https://atom.io/packages/tailwindcss-transpiler