问题标签 [mini-css-extract-plugin]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 仅构建 scss 文件到 css 防止编译/构建 JS 或仅构建 js，同时防止使用 webpack 4 编译 scss
所以我试图从 index.js 文件中一次只创建 css 文件或只创建 js 文件，它导入了很少的反应组件。
现在我如何创建两个不同的任务npm run build:js并npm run build:scss以不同的方式获取 js 和 css？有时我只需要更改样式，但我也必须为 js 构建。为了防止这种情况，我正在尝试这个。
EDIT1 - 还有一件事我忘了添加，所有这些Header, Body, Footer组件都导入不同的分子级组件，例如Button, Label. 最后预期的结果是
reactjs - 如何获得 mini-css-extract-plugin 来缩小我的文件
在 dist 文件夹中生成 bundle.css 但它没有被缩小。我手动将它们加载到我的 html 文件中，如下所示<link rel="stylesheet" href="../static/dist/bundle.css">：还像这样在 index.js 中导入样式文件：import "../css/style.css";。我如何让这个缩小？
reactjs - 服务器端 webpack 无法从 node_modules 读取 css 文件
我正在尝试使用react-responsive-carousel创建一个组件。
但是在尝试为服务器端构建代码时收到以下消息。对于客户端，MiniCssExtract 加载器能够读取这个 css 文件：
我的 webpack.client.config 是
而 webpack.server.config 是
组件代码是这样的：
请帮忙。
node.js - webpack sass-loader 和 `MiniCssExtractPlugin.loader` 没有将 scss 文件编译成 css
我的 webpack 配置有什么问题吗？我在网上到处都按照教程说相同的配置方式。但我想我一定错过了什么。
webpack.common.js
webpack.prod.js
重现
webpack - 在scss中引入具有相对路径的图片会导致postcss失败
我在webpack中配置了这个。
一开始postcss可以生效，但是如果在scss中引入图片会报这样的错误，所以我在postcss中添加了publicPath ，发现没有报错，但是又出现了新的问题。此时postcss不生效。你能帮我看看这个问题吗？
我的存储库：https ://github.com/pdsuwwz/react-app
scss 错误信息中的图像：
postcss 不工作警告信息：
webpack.config.js
开始：
结尾：
.babelrc
postcss.config.js
javascript - Webpack 找不到模块 mini-css-extract-plugin
我正在使用 Webpack ^4.26.0。在用于 CSS 之前，我已经在 Webpack 3 中使用了“extract-text-webpack-plugin”。但是我读到该插件在 Webpack 4 上不再工作了。“extract-text-webpack-plugin”建议使用“mini-css-extract-plugin”-plugin。
我已经通过命令安装了插件：
npm install --save-dev mini-css-extract-plugin
并需要 webpackconfig 中的插件，并将其添加到我的规则和插件中：
但是我收到以下错误：
它安装在我的 node_modules 中：
组件/searchkit/node_modules/mini-css-extract-plugin
我的文件夹结构：
vue.js - Vue SFC 样式未在 webpack 生产构建中提取
尝试将 vue（和 SFC）添加到我的 webpack 应用程序。<template>and<script>块工作正常，但由于某种原因，块中的样式没有<style>被提取用于生产构建。
在开发版本中，它将 .vue<style>块提取到单独的 css 文件（以入口点命名）。这没关系，但我更希望它们进入我的主样式表。
但无论我尝试什么，我都无法为生产构建 显示任何 .vue 样式（在任何文件中）。
这是我的 webpack 配置的缩写版本：
我使用的 .vue 文件就是这个演示文件。我正在尝试将其导入名为“testview”的入口点，其中仅包含：
webpack - Webpack MiniCSSExtractPlugin：cacheGroups 取决于导入文件名
我正在寻求有关 MiniCSSExtractPlugin 和该cacheGroups功能的帮助。
我有一个 JavaScript 入口文件index.js，它导入 2 个 Sass 文件，如下所示：
import './style.scss'
import './editor.scss'
我想要结束的是两个 CSS 文件 -style.css和editor.css.
这可以通过这里提到的选项来实现cacheGroups吗？
我无法修改此示例以使其正常工作。
webpack - Webpack 4、vuejs、mini-css-extract-plugin、sass-loader、source-map 问题
你好，
我尝试style.css从我的 vue 应用程序中编译我的风格的全局文件（in）。我们将 SASS (scss) 与Webpack 4.
问题：使用我的实际配置生成的源映射完全错误！我尝试使用 webpack 中的 SourceMapDevToolPlugin 来解决这个问题。请参阅下面我的 webpack conf：
App.vue从以下组件导入我的样式/src：
（PS：如果您有更好的导入样式的方法，我采取了任何提示或提示）（PS2：Webpack 和 Vue-ssr-render 在预取样式和 js 中多次导入我无法解决？）
感谢您的回答:)
javascript - Webpack 捆绑样式没有被提取到 css 文件中
在这里被 webpack 打败并设置它。在大多数情况下，我认为我已经正确设置了所有内容，但我不确定我缺少什么可以将我的样式提取到 .css 文件中，而不是捆绑到 .js 文件中。任何帮助将不胜感激。
这是我到目前为止所拥有的：
webpack.config.js
在我的 package.json 中，我有以下脚本：
当我运行 build 或 dev 时，我得到相同的结果，没有提取的 css 文件。