Webpack SASS 和 Tailwind 不生成 CSS 文件答案

【问题标题】：Webpack SASS and Tailwind not generating CSS fileWebpack SASS 和 Tailwind 不生成 CSS 文件
【发布时间】：2021-07-26 14:48:14
【问题描述】：

我想将 sass 和 tailwind 添加到我的项目中，但由于某种原因我不知道，运行 webpack 时没有生成 CSS 文件，或者它可能生成但我找不到它...

这是我的 webpack.config.js：

 const path = require("path");
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");

 module.exports = {
   entry: {
     index: './src/index.js',
     page2: './src/page2.js'
 },
 output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
 },

 module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                MiniCssExtractPlugin.loader,
                { loader: 'css-loader', options: { importLoaders: 1 } },                    
                {
                    loader: 'postcss-loader'                        
                },                    
                {
                    loader: 'sass-loader',
                    options: {                            
                        plugins: () => [autoprefixer()]
                    }
                } 
            ]
        },
        {
            test: /\.(png|jpg|gif|svg|eot|ttf|woff)$/,
            use: [
              {
                loader: 'file-loader',
              },
            ],
        },
        {
            test: /\.js$/i,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'],
              },
            },
        },
        {
            // Extract any CSS content and minimize
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                { loader: 'css-loader', options: { importLoaders: 1 } },
                { loader: 'postcss-loader' }
            ]
        }  
      ]
   },
   plugins: [
      new HtmlWebpackPlugin({
        template: './dist/index.html',
        inject: 'body',
        chunks: ['index'],
         filename: 'index.html'
      }),
      new HtmlWebpackPlugin({
        template: './dist/page2.html',
        inject: 'body',
        chunks: ['page2'],
        filename: 'page2.html'
      }),
      new MiniCssExtractPlugin({
        filename: "styles.css",
        chunkFilename: "[id].[contenthash].css"
       })
   ],
   devServer: {
       watchContentBase: true,
       contentBase: path.resolve(__dirname, 'dist'),
       open: true
   }
};

我的 postcss.config.js：

module.exports = {
   plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-preset-env')({ stage: 1 }),
    require('autoprefixer')
  ]
};

还有我的tailwind.config.js

module.exports = {
  purge: [  ],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

我的 index.js：

import "./styles.scss";

我的样式.scss：

@import "~tailwindcss/base.css";
@import "~tailwindcss/components.css";
@import "~tailwindcss/utilities.css";

.my-class {
   @apply font-bold;
}

这不起作用...有人可以帮助我吗？

【问题讨论】：

你能解决这个问题吗？您可以在下面发布解决方案吗？

标签： javascript webpack sass tailwind-css webpack-5

【解决方案1】：

我遇到了和你一样的问题，遇到了this answer，最初不确定为什么在你已经将importLoaders: 1 添加到你的 css-loader 配置中时你仍然遇到这个问题。

但是，根据the documentation for css-loader's importLoader option，您需要将 1 更改为 2。现在，当您还希望导入 sass-loader 时，只导入了 postcss-loader。

以下是我将如何更改您的 webpack.config.js 以解决此问题：

const path = require("path");
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");

 module.exports = {
   entry: {
     index: './src/index.js',
     page2: './src/page2.js'
 },
 output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
 },

 module: {
    rules: [
        {
            test: /\.(png|jpg|gif|svg|eot|ttf|woff)$/,
            use: [
              {
                loader: 'file-loader',
              },
            ],
        },
        {
            test: /\.js$/i,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'],
              },
            },
        },
        {
            // Extract any CSS or SCSS content and minimize
            test: /\.[s]?css$/,
            use: [
                MiniCssExtractPlugin.loader,
                { loader: 'css-loader', options: { importLoaders: 2 } },
                { loader: 'postcss-loader' },
                { loader: 'sass-loader' },
            ]
        }  
      ]
   },
   plugins: [
      new HtmlWebpackPlugin({
        template: './dist/index.html',
        inject: 'body',
        chunks: ['index'],
         filename: 'index.html'
      }),
      new HtmlWebpackPlugin({
        template: './dist/page2.html',
        inject: 'body',
        chunks: ['page2'],
        filename: 'page2.html'
      }),
      new MiniCssExtractPlugin({
        filename: "styles.css",
        chunkFilename: "[id].[contenthash].css"
       })
   ],
   devServer: {
       watchContentBase: true,
       contentBase: path.resolve(__dirname, 'dist'),
       open: true
   }
};

您会注意到我还将您的 css 规则重构为 scss 规则以消除一些冗余。这样，您只需声明一次所有样式加载器。

【讨论】：