gpt4 book ai didi

Webpack ExtractTextPlugin - 两个输出文件

转载 作者:行者123 更新时间:2023-12-04 16:58:41 25 4
gpt4 key购买 nike

我需要生成两个css文件。我尝试使用

new ExtractTextPlugin(['css/style.css','css/head.css'], { allChunks: true })

在我的配置和
require('../sass/head.scss');
require('../sass/style.scss');

在我的主 js 文件中。

不幸的是,它会产生错误。我能做什么?

最佳答案

如何使用 Webpack 2 和 ExtractTextPlugin 导出多个 CSS 文件/片段

基本上我想要做的就是复制标准的 Compass 行为(这将为每个不是部分的 SCSS 文件生成一个单独的 CSS 文件)并添加 PostCSS/Autoprefixer。

Tomasz 的回答终于让我走上了正轨,但仍有一些错误:

  • webpack 提示缺少输出文件名,所以我添加了一个
  • 之后,它提示“多个 Assets 发送到同一个文件”


  • 所以这是我现在的 webpack.config.js这将自动添加前缀并生成两个单独的 CSS 文件:
    const ExtractTextPlugin = require("extract-text-webpack-plugin");

    // var ExtractCSS = new ExtractTextPlugin('dist/[name].css');
    var ExtractCSS = new ExtractTextPlugin('dist/[name]');

    module.exports = {
    entry: {
    // style: './src/style.scss',
    // extra: './src/extra.scss'
    'style.css': './src/style.scss',
    'extra.css': './src/extra.scss'
    },
    output: {
    // filename: './dist/[name].js'
    filename: './dist/[name]'
    },
    module: {
    rules: [
    {
    test: /\.scss$/,
    use: ExtractCSS.extract({
    fallback: "style-loader",
    use: [
    "css-loader",
    "postcss-loader",
    "sass-loader"
    ]
    })
    }
    ]
    },
    plugins: [
    ExtractCSS
    ],
    watch: true
    };

    这里的关键点是 删除 来自 ExtractTextPlugin() 的文件扩展名和 output{}然后 添加 他们到 entry{} , 否则 webpack 会为每个 CSS 文件生成一个 JS 文件,即 dist/style.jsdist/extra.js .

    我的 postcss.config.js ,这里没什么特别的:
    module.exports = {
    plugins: [
    require('autoprefixer')
    ]
    }

    最后 package.json :
    {
    "dependencies": {
    },
    "devDependencies": {
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^2.0.0-rc.3",
    "node-sass": "^4.5.0",
    "postcss-loader": "^1.3.0",
    "sass-loader": "^6.0.0",
    "style-loader": "^0.13.1",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0"
    }
    }

    manubo 的帽子提示 herehere .

    奇怪的故障:启动时 $ webpack第一次,我得到了通常将 build.js 的内容附加到每个导出的 CSS 文件的内容。通过对任何 SCSS 文件进行修改来触发重建可以解决此问题。如果你知道如何解决这个问题,请告诉我。

    关于Webpack ExtractTextPlugin - 两个输出文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38430388/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com