node.js - webpack 4额外的倍数css
问题描述
我正在使用 webpack 4。我需要能够在单独的文件中将 scss 提取到 css。
index.js
import "./styles/styles.scss";
import "./styles/stylesapp.scss";
import "./styles/..."; / more files scss
转换为样式/styles.css 和样式/stylesapp.css,
发生在我身上的问题。
ExtractTextPlugin = not soport webpack4 MiniCssExtractPlugin = 提取文件但我想发送多个 css
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const path = require("path");
const config = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader",
{
loader: MiniCssExtractPlugin.loader
},
"css-loader",
"sass-loader"
]
},
{
test: /\.css$/,
use: [
"style-loader",
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: true
}
}
],
include: /\.module\.css$/
},
{
test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/,
loader:
"url-loader?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]&publicPath=../"
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader:
"url-loader?limit=10000&mimetype=application/octet-stream&name=fonts/[name].[ext]&publicPath=../"
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader?name=fonts/[name].[ext]&publicPath=../"
},
{
test: /\.(gif|jpg|png|ico)(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader?name=images/[contenthash].[ext]&publicPath=../"
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader:
"url-loader?limit=10000&mimetype=image/svg+xml&name=images/[name].[ext]&publicPath=../"
}
]
},
resolve: {
alias: {
styles: path.resolve(__dirname, "src/styles"),
assets: path.resolve(__dirname, "src/assets"),
fonts: path.resolve(__dirname, "src/fonts")
}
},
optimization: {
minimizer: []
},
plugins: [
new TerserPlugin(),
new OptimizeCssAssetsPlugin(),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: "style/[name].css"
})
]
};
// eslint-disable-next-line no-undef
module.exports = config;
对不起我的英语不好。谢谢。
解决方案
推荐阅读
- c# - 如何在 C# 中删除 .NET JavaScriptSerializer DateTime 中的特殊字符
- validation - GET API 中无效数据与不存在数据的响应
- c# - 如何使用 GetRolesForUser 使用 asp.net mvc 调用同一个表的两个字段
- android - 重新安装或卸载应用程序后如何不删除数据库 - sqllite,SugarOrm
- php - 在 WooCommerce 结账时在移动设备上将产品部分移至顶部
- amazon-cloudwatch - AWS CloudWatch 指标,带有指标的 AVG
- amazon-web-services - 如何在 cdk 堆栈之间传递变量而不会出现交叉引用错误?
- algorithm - 在范围内查找元素的高效查询
- apache-spark - 使用 pyspark 查找连接模式/adv 分区以获取最新值
- postgresql - Haskell 堆栈构建错误:构建包 postgresql-libpq-0.9.4.3 时