使用 webpack 结合顺风 css 和 sass

Question

我正在努力让 Tailwind CSS 与 SASS 和 Webpack 一起工作。 tailwind 的 postcss 配置似乎在处理@tailwind preflight 、 @tailwind components和@tailwind utilities方面没有真正做任何事情

我的设置如下：

布局.scss

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

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

@import "~tailwindcss/utilities.css";

入口.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' }
                ]
            }            
        ]
    }
};

当我运行 Webpack 时，一切正常，但/dist/main.css的内容是：

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

我怀疑它与加载器的（顺序）有关，但我似乎无法弄清楚为什么它没有得到正确处理。

有谁知道我在这里做错了什么？ :-)

提前致谢。

Answer 1

哇，所以在更多地摆弄装载机之后，我让它工作了:-)供将来参考：

我添加了options: { importLoaders: 1 }到 SCSS 文件的 css-loader 并删除了： plugins: () => [autoprefixer()]从我的 webpack.config.js 文件中的 postcss-loader。

完整的、更新的 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', options: { importLoaders: 1 } },                    
                    {
                        loader: 'postcss-loader'                        
                    },                    
                    {
                        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' }
                ]
            }            
        ]
    }
};

Answer 2

有一个名为 tailwindcss-transpiler 的扩展，它将您的 layout.tailwind.scss 文件编译成纯 CSS 文件。它还优化了功能。我希望它会有用。

对于 VS 代码https://marketplace.visualstudio.com/items?itemName=sudoaugustin.tailwindcss-transpiler

对于 Atom https://atom.io/packages/tailwindcss-transpiler