在 webpack 中排除一些 css 个文件

Question

我遇到了 webpack 的问题。我的项目具有以下结构。

文件夹结构：

src
  js
    app.js  // For importing app.scss file
    vendor.js // For importing vendor.scss file
  scss
    app.scss // Our custom styles
    vendor.scss // Require all vendor styles from node_modules
package.json
postcss.config.js
webpack.config.js

在 scss 文件夹中有 2 个文件 app.scss 和 vendor.scss。 app.scss 文件包含我们所有的自定义样式，vendor.scss 文件包含所有供应商样式，例如 bootstrap 库样式。

在 webpack 命令之后：

npm run dev

Webpack 通过 JavaScript 文件导入这些 scss 文件并通过 postcss-loader 添加供应商前缀并在 dist 上输出文件夹。

但我不想在 vendor.scss 文件上添加供应商前缀，因为供应商库已经有供应商前缀。那么有没有办法从 postcss-loader.

中排除 vendor.scss 文件

完整代码：

src/js/app.js:

import '../scss/app.scss'

src/js/vendor.js:

import '../scss/vendor.scss'

src/scss/app.scss:

// Our custom styles
.app {
  display: flex;
}

src/scss/vendor.scss:

// Vendor Styles
.container {
  display: flex;
}

@import '~bootstrap/scss/bootstrap';

package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development --progress true --colors"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "bootstrap": "^4.2.1"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "autoprefixer": "^9.4.6",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.0",
    "filemanager-webpack-plugin": "^2.0.5",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1"
  }
}

postcss.config.js:

module.exports={
  plugins: [
    require('autoprefixer')({
      'browsers': [
        '>= 1%',
        'last 1 major version',
        'not dead',
        'Chrome >= 45',
        'Firefox >= 38',
        'Edge >= 12',
        'Explorer >= 10',
        'iOS >= 9',
        'Safari >= 9',
        'Android >= 4.4',
        'Opera >= 30'
      ],
      cascade: true
    })
  ]
};

webpack.config.js:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const FileManagerPlugin = require('filemanager-webpack-plugin');
module.exports = function() {
    return ({
        entry: {
            'vendor': './src/js/vendor.js',
            'app': './src/js/app.js',
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'js/[name].[chunkhash].js'
        },
        module: {
            rules: [{
                    test: /\.js$/,
                    exclude: /(node_modules)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                },
                {
                    test: /\.(sa|sc|c)ss$/,
                    use: [{
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                publicPath: '../'
                            }
                        }, {
                            loader: 'css-loader',
                        }, // translates CSS into CommonJS
                        {
                            loader: 'postcss-loader',
                        }, // Add vendor prefixes on build css file
                        {
                            loader: 'sass-loader',
                        } // compiles Sass to CSS
                    ]
                },
            ]
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: 'css/[name].[contenthash].css'
            }),
            // Before Build
            new FileManagerPlugin({
                onStart: {
                    delete: [
                        'dist',
                    ],
                }
            }),
        ]
    });
};

Zip 文件。

Answer 1

因此您希望供应商前缀不要添加到 Webpack 生成的 vendor.css 文件中。

记住 Webpack 以相反的顺序解析加载程序数组。您可以使用正则表达式在 postcss-loader 的对象上添加 exclude 属性。

webpack.config.js:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const FileManagerPlugin = require('filemanager-webpack-plugin');
module.exports = function() {
    return ({
        entry: {
            'vendor': './src/js/vendor.js',
            'app': './src/js/app.js',
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'js/[name].[chunkhash].js'
        },
        module: {
            rules: [{
                    test: /\.js$/,
                    exclude: /(node_modules)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                },
                {
                    test: /\.s(c|a)ss$/,
                    use: {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },// Take scss file and split into a separate css file
                },
                {
                    test: /\.s(c|a)ss$/,
                    use: {
                        loader: 'css-loader',
                    },// Interprets scss @import and url() like import/require()
                },
                {
                    test: /\.s(c|a)ss$/,
                    exclude: [/vendor/],
                    use: {
                        loader: 'postcss-loader',
                    },
                }, // PostCSS turns your SCSS file into a JS object & converts that object back to a SCSS file
                {
                    test: /\.s(c|a)ss$/,
                    use: {
                        loader: 'sass-loader',
                    },// look for scss file through sass-loader, compile scss into css code
                },
            ]
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: 'css/[name].[contenthash].css'
            }),
            // Before Build
            new FileManagerPlugin({
                onStart: {
                    delete: [
                        'dist',
                    ],
                }
            }),
        ]
    });
};

在 webpack 中排除一些 css 个文件

Exclude some css files in webpack

javascript

webpack

postcss-loader