javascript - Webpack SASS 和 Tailwind 不生成 CSS 文件
问题描述
我想将两者都添加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;
}
这不起作用...有人可以帮助我吗?
解决方案
我遇到了和你一样的问题并遇到了这个答案,最初不确定为什么在你已经importLoaders: 1
添加到你的 css-loader 配置时你继续遇到这个问题。
但是,根据css-loader 的 importLoader option 的文档,您需要将 1 更改为 2。现在,只有postcss-loader
在您还想导入时才sass-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 规则以消除一些冗余。这样,您只需声明一次所有样式加载器。
推荐阅读
- web-services - 我们如何使用面向服务的架构来自动化金融科技解决方案的应用程序流程?
- javascript - 我们如何使用 node js 中的 pm2 api 显示 pm2 应用程序的最新日志?
- pytorch - pytorch 中的 Tensorboard 不会在浏览器中加载任何内容
- android - 如何检查哪个图像是按钮的源图像并在每次单击 Kotlin 中的按钮时更改它
- android - ActivityViewModels 和惰性 ViewModelProvider 的区别?
- python - AttributeError: 'str' 对象没有属性 'read' 。打印时出错(filename.read())
- android - 如何将 UTC 时间转换为用户时区?
- python - 读取带有负数的文本文件时出现问题
- windows - 复选框(选中或未选中)
- c - 我正在尝试通过结构数组增加指针 - 我的解决方案有效,但以非直观的方式这样做