标签: mini-css-extract-plugin

我正在使用 mini-css-extract-plugin 将 css 从我们的包中提取到一个文件中。我需要将该文件放在文件系统中的不同位置。

如何配置 mini-css-extract-plugin 以将 css 文件放到与 js 包不同的路径。

警告：块AccessRights〜Groups〜Navigator [mini-css-extract-plugin]之间的顺序冲突：

• css ../node_modules/css-loader??ref--7-1!../node_modules/postcss-loader/lib!./components/Icon/_circle/Icon_circle.scss
• css ../node_modules/css-loader??ref--7-1!../node_modules/postcss-loader/lib!./components/Counter/Counter.scss
• css ../node_modules/css-loader??ref--7-1!../node_modules/postcss-loader/lib!./components/NavigatorToolbar/NavigatorToolbar.scss

这是什么意思，以及如何解决？先感谢您！

"assets-webpack-plugin": "3.9.5",
"autoprefixer": "9.1.0",
"css-loader": "1.0.0",
"file-loader": "1.1.11",
"image-webpack-loader": "4.3.1",
"mini-css-extract-plugin": "0.4.2",
"postcss-advanced-variables": "2.3.3",
"postcss-clearfix": "2.0.1",
"postcss-conditionals": "2.1.0",
"postcss-extend": "1.0.5",
"postcss-functions": "3.0.0",
"postcss-hexrgba": "1.0.1",
"postcss-import": "12.0.0",
"postcss-loader": "2.1.6",
"postcss-media-minmax": "3.0.0",
"postcss-nested": "3.0.0",
"postcss-sassy-mixins": "2.1.0",
"postcss-simple-vars": "4.1.0",
"postcss-size": "2.0.0",
"postcss-urlrewrite": "0.2.2",
"source-map-loader": "0.2.3",
"string-replace-loader": "2.1.1",
"style-loader": "0.22.0",
"url-loader": "1.0.1",
"webpack": "4.16.5",
"webpack-cli": "3.1.0",
"webpack-dev-server": "3.1.5",    

我正在尝试提取库中的 css 文件。我已经读过执行此操作的方法是使用 mini-css-extract-plugin。

难道我做错了什么？还有其他方法可以提取我的库的 css 文件吗？

下面我使用https://webpack.js.org/plugins/mini-css-extract-plugin上提供的相同文件创建了一个简单的测试项目

下面的示例在 webpack 5 中失败，但在 webpack 4 中运行良好。

样式.css

body {
  background: green;
}

索引.js

import './style.css';

包.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "src/component.js",
  "dependencies": {},
  "devDependencies": {
    "css-loader": "^5.0.1",
    "mini-css-extract-plugin": "^1.3.5",
    "webpack": "^5.19.0",
    "webpack-cli": "^4.4.0"
  },
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC"
}

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    index: './index.js'
  },
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [ …

我正在使用 webpack 的CssMinimizerWebpackPlugin（文档）。我最初按照文档上的建议配置它

  optimization: {
    minimize: true,
    minimizer: [
      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
      // `...`,
      new CssMinimizerPlugin(),
    ],
  },

但这样做似乎main.js也阻止了我的文件被缩小。我决定更改它并将其放在plugins标签下，只需完全删除优化即可，如下所示：

    plugins: [
        //other plugins
        new MiniCssExtractPlugin(),
    ],

通过这种方式，它似乎可以工作，.css 和 .js 文件都被缩小了。我在上面提供的文档中没有找到任何对此的引用，所以我想知道为什么会发生这种情况？为什么在使用记录的设置时它不起作用？

作为参考，请在下面找到我的完整工作webpack 配置文件（请注意，我通过 --mode 标志传递开发或生产模式）：

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); …

我正在使用 React 创建一个应用程序，它运行良好npm start，但是当我尝试构建该应用程序时，显示以下错误。

PS D:\ ****\ **\*\profile> npm run build

> profile@0.1.0 build
> react-scripts build

D:\ ****\ **\profile\node_modules\react-scripts\config\webpack.config.js:664
        new MiniCssExtractPlugin({
        ^

TypeError: MiniCssExtractPlugin is not a constructor
    at module.exports (D:\Documents\Project\React\profile\node_modules\react-scripts\config\webpack.config.js:664:9)
    at Object.<anonymous> (D:\Documents\Project\React\profile\node_modules\react-scripts\scripts\build.js:58:16)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47

我在用着

这是我的package.json文件。

{
  "name": "profile",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": …

我是 webpack 的新手，并遵循一些教程来学习基础知识。

我想style-loader在开发过程中注入样式表（启用 HMR）并希望MiniCssExtractPlugin用于生产构建。但是当我使用 MiniCssExtractPlugin 插件时，我失去了样式加载器的注入功能。

请查看我的 webpack 配置：

const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = {
    entry: ['./src/index.js'],
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.(sass|scss)$/,
                use: [
                    "style-loader",
                   {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: process.env.NODE_ENV === 'development'
                        }
                    },
                    "css-loader",
                    "sass-loader"
                ]
            }
        ]
    },
    plugins: [
        new …

一直试图研究这个，但似乎没有其他人有这个，或者认为这是一个问题。

我使用mini-css-extract-plugin（MiniCssExtractPlugin）在我的webpack.config.js。

但是，当我运行时webpack，控制台上散落着数百个与此类似的实例...

Child mini-css-extract-plugin ../../../node_modules/css-loader/index.js??ref--6-1!../../../node_modules/postcss-loader/src/index.js!../../../node_modules/sass-loader/lib/loader.js!ui/radiolist-toggler/RadioListToggler.scss:
    Entrypoint mini-css-extract-plugin = *
    [../../../node_modules/css-loader/index.js?!../../../node_modules/postcss-loader/src/index.js!../../../node_modules/sass-loader/lib/loader.js!./ui/radiolist-toggler/RadioListToggler.scss] /Users/~~~/git/user-section/node_modules/css-loader??ref--6-1!/Users/~~~/git/user-section/node_modules/postcss-loader/src!/Users/~~/git/user-section/node_modules/sass-loader/lib/loader.js!./ui/radiolist-toggler/RadioListToggler.scss 5.33 KiB {mini-css-extract-plugin} [built]
        + 1 hidden module

我需要向上滚动几秒钟才能看到我的所有资产等。

我对 webpack 很陌生，所以不确定如何防止它输出到控制台？

下面是我的 webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const modernizr = require("modernizr");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');


module.exports = {
  context: path.resolve(__dirname, 'src/main/client'), …

使用webpack 2(或3)时,我可以编写如下代码:

const coreStyles = new ExtractTextPlugin('./styles/core.bundle.css');
const componentStyles = new ExtractTextPlugin('./styles/components.bundle.css');

rules: [
{
   test: /\.scss$|\.css$/,
   include: path.resolve(__dirname, './styles/App.scss'),
   use: coreStyles.extract({
       use: ['css-loader', 'sass-loader']
   })
},
{
   test: /\.scss$|\.css$/,
   exclude: path.resolve(__dirname, './styles/App.scss'),
   use: componentStyles.extract({
       use: ['css-loader', 'sass-loader']
   })
}
]

结果,我输出了2个css文件.

我怎么能达到相同的mini-css-extract-plugin？根据文档,我只能指定一个文件名:

plugins: [
    new MiniCssExtractPlugin({
        filename: "[name].css",
    })
]

谢谢.

我正在使用一个用最新版本的 vue cli 3 创建的项目。我使用的是默认配置，我的路由器有许多动态导入的路由。在生产中运行时，我的 css 和 js 都被分成多个块。虽然 js 的行为是可取的。我的 css 文件很小我想关闭 css 的块。

如何通过 vue.config.js 文件配置 webpack 以执行此操作。请帮助提供确切的命令，因为我发现 webpack 配置和链语法非常混乱。谢谢:)

我似乎无法让源映射与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。

但是没有源映射至少告诉我样式来自哪个文件很烦人。