问题标签 [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.
css - webpack 4：创建多个主题 css 文件
我需要在我的反应项目中使用 webpack 版本 4 和“迷你 CSS 提取插件”创建多个主题 CSS 文件。取决于 webpack 找到 SCSS 文件导入的位置，它应该使用 loader 两次——在 sass-loader 选项中使用不同的数据。
根据这个目标，我在互联网上没有发现任何有用的东西。我也已经尝试过使用 webpack 的加载器，例如：webpack-combine-loaders、multi-loader 等......
这是 webpack 配置的一部分
在我的 scss 文件（button.scss）中，我使用了这样的条件：
结果，我想获得两个 CSS 文件 client.white.css，其中应用了白色主题的 sass 变量和 client.dark.css，其中应用了深色主题的变量
reactjs - Laravel mix 4 (Webpack 4) & React CSS 模块
我当前的 package.json 中有大约 20 个漏洞，我决定开始升级它们。
在npm audit fix --forcewebpack (& laravel mix) 从 2.x 更新到 4.x之后。
我正在运行一个带有 CSS 模块 ( react-css-modules) 的 React webapp，并且还使用ExtractTextPlugin. 但是，两者ExtractTextPlugin似乎react-css-modules都已被弃用。
我当前的 webpack.mix.js（这在 webpack 2 上运行良好）：
我的 package.json 中的依赖项
由于extract-text-webpack-plugin与webpack4 不兼容，我决定将其替换为mini-css-extract-plugin. 但是现在我不断收到此错误：
在我的中有以下内容webpack.mix.js：
我尝试了很多变体，但要么我不断出错，要么没有提取反应组件中的 CSS。
我怎样才能简单地用包替换extract-text-webpack-plugin包mini-css-extract-plugin？我尝试继续使用 laravel-mix，但如果这是导致问题的原因，我宁愿不使用。
css - mini-css-extract-plugin：模块构建失败，出现 170 个错误，每个 CSS 文件一个错误
我正在尝试在开发模式下运行 web 工具包，但mini-css-extract-plugin模块构建失败，每个 CSS 文件一次。让我发布其中的一些：
这是我定义它的地方：
接着：
我将不胜感激。
webpack - mini-css-extract-plugin 中的源映射
我似乎无法让源映射与mini-css-extract-plugin. 我让他们一起工作style-loader。
一些背景信息：我一直使用style-loader来获取热模块更换以在开发模式和mini-css-extract-plugin生产模式下工作。
现在mini-css-extract-plugin支持 hmr 太棒了，因为我不再需要在开发中处理 FOUC。
但是没有源映射至少可以告诉我样式来自哪个文件，这很烦人。
webpack - 为什么 Webpack 会在 CSS 更改时重建 JS？
我使用mini-css-extract-plugin和。css-loadersass-loader
CSS更改的输出：
我假设这是因为 Webpack 基本上是一个 JS 捆绑器，所以 CSS 被捆绑到 JS 并将mini-css-extract-pluginCSS 提取到一个单独的块中。那准确吗？
为什么只有我的样式发生变化时，Webpack 会重建 JS 输出文件？
webpack - 如何配置 webpack 将 sass 文件编译到指定目录
我正在尝试配置 webpack 以将 scss 文件编译到 /dist/css 文件夹中。我不想将 css 与 js 捆绑在一起。但我遇到了一个错误。
我究竟做错了什么？
我尝试重新安装 webpack 和 npm rebuild node-sass 但它对我不起作用。
我实际的 webpack.config.js：
错误输出：
javascript - 如何通过 Webpack 的“import”语句将 CSS 提取到“critical.css”样式表？
背景
我们的 Web 应用程序遵循基于组件的设计模式，每个组件都包含一个模板、Sass 部分和 JavaScript 模块，如下所示：-
JavaScript 模块import是组件的 Sass 部分，模板通过 Rails 呈现。Webpack 配置了许多加载器和插件来编译样式并（通过mini-css-extract-plugin）将生成的 CSS 提取到每个入口点的独立样式表中，例如：-
组件import根据使用情况被编入入口点（即，如果action_button存在于 'home' 上，则它会呈现在视图中的某处并import '~/components/action_button/action_button.js';在home.js.
问题
为了改善页面加载体验，我们手动@import将选择的几个组件 Sass 部分输入到critical.scss入口点，然后将输出的 CSS 内联到<head>文档中，并异步加载完整的样式表。
理想情况下，我们希望动态地执行此操作，我想到的一种方法是通过import语句表示组件的关键性。也许使用自定义加载器？：-
问题是我不知道 Webpack 加载器是如何工作的。我本质上希望它保留所有现有规则，但将提取的 CSS 从其中的 Sass partialsimport重定向到.critical.css
有谁知道现有的解决方案或知道从哪里开始解决这样的问题？
javascript - mini-css-extract-plugin 产生的大型控制台输出
一直在尝试研究这个，但似乎没有其他人有这个，或者认为这是一个问题。
我在我mini-css-extract-plugin的.MiniCssExtractPluginwebpack.config.js
但是，当我运行webpack控制台时，会出现数百个类似的实例......
我需要向上滚动几秒钟才能看到我的所有资产等。
我对 webpack 很陌生，所以不完全确定如何防止它被输出到控制台？
下面是我的webpack.config.js
webpack - Webpack 4 升级 - 怀疑 mini-css-extract-plugin - CSS 从不加载 - Uncaught SyntaxError: Unexpected token
我已经从 webpack v2 升级到 webpack v4 - 因为提取文本插件不再存在我已经用 MiniCssExtract 插件替换它并且不得不推迟升级，以便我可以将文件名作为函数处理。
既然这是可用的，我正在运行 webpack，但是在我的应用程序中没有任何面向 css 的内容将运行我将始终得到： Uncaught SyntaxError: Unexpected token 。在控制台中。
我什至尝试过最简单的 CSS，但没有任何 CSS 文件可以在应用程序中正确执行。
我试图剥离回简单的 css-loader 等，它们工作正常，所以我认为这与配置 mini-css-extract-plugin 的方式或我错过的一些愚蠢的事情有关。
我的主题配置有一个文件：
主要的 webpack 文件在这里：
node.js - webpack用css/scss文件生成js文件
描述
在 webpack 我使用mini-css-extract-plugin：
在块文件中加载 scss 文件：
当我使用动态导入加载 scss 时：
它将生成一个包含样式的test.[hash].css和一个test.[hash].js：
问题
我想尽量减少延迟和加载文件，所以我发现有一个几乎空的test.[hash].js文件是多余的。
您是否有办法在 js 文件中包含 scss（参见想法 1）或不发出/使用几乎为空的 js 文件？
想法 1：不使用 mini-css-extract-plugin
我的第一个想法是不使用 mini-css-extract-plugin 来动态导入 scss，但这将在 js 中包含很多基于 css 的东西（https://github.com/webpack-contrib/extract-text-webpack-插件/问题/255）。