标签: mini-css-extract-plugin
源映射在 mini-css-extract-plugin 中
我似乎无法让源映射与mini-css-extract-plugin. 我让他们与style-loader.
devtool: argv.mode === 'development' ? 'eval' : 'none',
[...]
test: /\.scss$|\.css$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {sourceMap: argv.mode === 'development', hmr: argv.hot},
},
{
loader: 'css-loader',
options: {sourceMap: argv.mode === 'development', importLoaders: 1},
},
[...]
plugins: [
[...]
new MiniCssExtractPlugin({
filename: argv.mode === 'development' ? '[name].css' : '[contenthash].css',
chunkFilename: argv.mode === 'development' ? '[id].css' : '[contenthash].css',
}),
]
一些前沿信息：我一直使用style-loader来获取热模块替换以在开发模式和mini-css-extract-plugin生产模式下工作。
现在mini-css-extract-plugin支持 hmr，这很棒，因为我不再需要在开发中处理 FOUC。
但是没有源映射至少告诉我样式来自哪个文件很烦人。
webpack webpack-dev-server hot-module-replacement mini-css-extract-plugin
推荐指数
解决办法
查看次数
Webpack mini-css-extract-plugin @font-face url解析问题
我在理解 URL/路径的性质以及使用 和配置其选项（例如 和 属性）时如何解析它们mini-css-extract-plugin时file-loader遇到context困难filename。
我正在为 WordPress 开发一个自定义主题，自定义主题的文件夹是我初始化 npm project/package.json 文件和 webpack.config.js 文件的位置。我正在使用浏览器同步插件将本地 WordPress 服务器代理到浏览器同步服务器。
文件加载器将文件发送到 dist>assets>fonts 文件夹中。但编译后的 CSS 文件中生成的 URL 未正确解析。
输出CSS，浏览器控制台错误
GET http://localhost:4444/wp-content/themes/test/dist/css/assets/fonts/my-font.ttf net::ERR_ABORTED 404 (Not Found)
GET http://localhost:4444/wp-content/themes/test/dist/css/assets/fonts/my-font.woff 404 (Not Found)
在上面的错误中，网址显示dist/css/assets/fonts/my-font.woff，这不是我所期望的。这是预期的，dist/assets/fonts/my-font.woff因为这是文件加载器在 dist 文件夹中发出文件的地方。（如文件加载器上下文选项中定义）
我不明白为什么它将css目录添加到字体 url 中。唯一提及的dist/css路径是在 MiniCSSExtractPlugin 选项的 filename 属性中。因为那是我想要输出 css 文件的地方。
css这可以通过删除文件名属性上的路径前缀来确认。然后，该 url 会相对于 dist 路径正确解析，但编译后的 css 文件会放置在 dist 文件夹的根目录中，而不是其自己的dist/css子目录中。
mini css 提取插件选项
new MiniCSSExtractPlugin({
filename: …path font-face webpack webpack-file-loader mini-css-extract-plugin
推荐指数
解决办法
查看次数
您忘记添加“mini-css-extract-plugin”插件
我在我的 webpack 版本 1.3.6 中使用 mini-css-extract-plugin 但在尝试运行 dev build 时出现以下错误。css 和 scss 都在应用程序中。
./src/index.css 中的错误模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）：错误：您忘记添加“mini-css-extract-plugin”插件（即{ plugins: [new MiniCssExtractPlugin()] }），请阅读https://github.com/webpack-contrib/mini-css-extract-plugin#getting-
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = ({ mode } = { mode: "production" }) => {
console.log(`mode is: ${mode}`);
return {
mode,
entry: "./src/index.tsx",
output: {
publicPath: "/",
path: path.resolve(__dirname, "build"),
filename: "bundle.js",
},
resolve: {
extensions: [".js", ".jsx", ".css", ".scss", ".ts", ".tsx"],
},
module: {
rules: [ …推荐指数
解决办法
查看次数
使用 webpack MiniCssExtractPlugin 和 OptimizeCSSAssetsPlugin 复制 css 文件
我遇到了 dist/css 下重复 css 文件的问题
我的webpack配置如下：
webpack.base.config.js
/* eslint quote-props: ['off'] */
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isProduction = process.env.NODE_ENV === 'production';
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
module.exports = {
context: path.resolve(__dirname, '../'),
entry: { …推荐指数
解决办法
查看次数
Webpack 4：mini-css-extract-plugin +文件加载器未加载资产
我正在尝试移动其中一个.scss文件中使用的素材资源（图像和字体），但似乎它们被忽略了：
这是我的.scss文件：
@font-face {
font-family: 'myfont';
src: url('../../assets/fonts/myfont.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
body {
color: red;
font-family: 'myfont';
background: url('../../assets/images/bg.jpg');
}
这是我的webpack.config.js：
const path = require('path');
const { CheckerPlugin } = require('awesome-typescript-loader');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
target: 'node',
entry: path.resolve(__dirname, 'server.tsx'),
output: {
filename: 'server_bundle.js',
path: path.resolve(__dirname, 'build'),
publicPath: '/build'
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx']
},
module: {
rules: [{
test: /\.(tsx|ts)?$/,
loader: 'awesome-typescript-loader',
options: { …推荐指数
解决办法
查看次数
如何使用 MiniCssExtractPlugin 控制 CSS 的顺序？
{
test: /\.module\.scss$/,
use: [
{ loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } },
{
loader: 'css-loader',
options: {
modules: { localIdentName: '[local]---[hash:base64:5]' }
}
},
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
resources: './src/css/_variables.scss'
}
}
]
},
{
test: /\.scss$/,
exclude: /\.module\.scss$/,
use: [
{ loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } },
'css-loader',
'sass-loader'
]
},
...
plugins: [
new MiniCssExtractPlugin({
filename: 'css/bundle.css'
})
]
我正在创建一个 css 文件，其中包含一些 vanilla sass 样式和一些 css 模块样式。有没有办法控制这个，以便模块 css 出现在输出的 bundle.css 文件中的常规 css …
推荐指数
解决办法
查看次数
如何从 HTMLWebpackPlugin 块中为样式发出 CSS 块？
我正在尝试将 CSS 模块用于 html，由 html-webpack-plugin 生成。
源代码/索引.ejs
<div class="<%= require('./item.css').foo %>"></div>
源代码/样式.css
<div class="<%= require('./item.css').foo %>"></div>
此代码与以下配置捆绑在一起，以某种方式工作（css 模块散列类名找到了生成的方式index.html）：
webpack.config.js
.foo {
color: red
}
但问题是 CSS 块没有被 emmited。
% npm run build -- --mode production
> simple-nunjucks-loader-example-isomporphic@1.0.0 build /Users/user/Projects/nunjucks-loader/examples/isomorphic
> webpack "--mode" "production"
Hash: 5edf5687d32d114e6469
Version: webpack 4.41.5
Time: 526ms
Built at: 01/02/2020 10:51:04 PM
Asset Size Chunks Chunk Names
index.html 98 bytes [emitted]
main.js 930 bytes 0 [emitted] main
Entrypoint main = main.js
[0] ./src/index.js 1.43 …推荐指数
解决办法
查看次数
如何使用webpack 4删除未使用的CSS？
我在删除webpack 4中未使用的CSS时遇到问题.似乎大多数CSS纯化插件都依赖于提取文本插件,该插件未针对版本4进行更新.
这是我的命令:
node_modules/.bin/webpack --mode = development --env.operation = separateCSS
要么
node_modules/.bin/webpack --mode = development --env.operation = bundleCSS
这是我的webpack.config.js的一部分:
rules: [
// Loader for SASS files
{
test: /\.s[ac]ss$/,
use: [
// Use IIFE to choose how to emit the CSS: 1. Extract as separate file 2: Bundle with the JS file
(() => { return env.operation == "separateCSS" ? MiniCssExtractPlugin.loader : 'style-loader'; })(),
{ loader: 'css-loader', options: { importLoaders: 1, url: true } },
{
loader: 'postcss-loader',
options: { …推荐指数
解决办法
查看次数
Webpack-MiniCssExtractPlugin不提取文件
我已经为VueJS项目创建了webpack配置。我想将样式与javascript代码分开。我使用过mini-css-extract-plugin，但最终我只收到bundle.js文件。此配置有什么问题，哪里有错误？是否有缺少的装载程序。我的配置如下：
import path from 'path';
import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import VueLoaderPlugin from 'vue-loader/lib/plugin';
import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
import CleanWebpackPlugin from 'clean-webpack-plugin';
const devMode = process.env.NODE_ENV !== 'production';
const prodPlugins = [
new UglifyJsPlugin(),
new MiniCssExtractPlugin({
filename: "css/style.css"
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
})
];
const basicPlugins = [
new CleanWebpackPlugin('dist'),
new VueLoaderPlugin()
];
const config = {
entry: {
bundle: './src/main.js'
},
output: { …推荐指数
解决办法
查看次数
MiniCssExtractPlugin公共路径不起作用
我正在使用MiniCssExtractPlugin在我的react应用程序中延迟加载css文件.
我已经为MiniCssExtractPlugin提供了publicPath选项,但它没有采用此选项值,它采用了output.publicPath选项.
config:
{
test: /\.(css)?$/,
use: [{
loader : MiniCssExtractPlugin.loader,
options : {
publicPath : '../'
}
},
'css-loader'
],
}
任何帮助???
推荐指数
解决办法
查看次数