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文件包含所有供应商样式，例如引导程序库样式。

在webpack命令之后：

npm run dev

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

但是我不想在vendor.scss文件上添加供应商前缀，因为供应商库已经具有供应商前缀。因此，有一种方法可以从vendor.scss中排除postcss-loader文件。

完整代码：

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以相反的顺序解析加载程序数组。您可以使用正则表达式在exclude的对象上添加postcss-loader属性。

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文件

1 个答案: