时间戳

首页 > 解决方案 > Webpack SASS 供应商拆分

webpack - Webpack SASS 供应商拆分

问题描述

我使用这个配置来加载我的样式：

{
  test: /\.(sc|c|sa)ss$/,
  use: [
    dev
      ? "vue-style-loader"
      : extractLoader,
    {
      loader: "css-loader",
      options: { modules: true, importLoaders: 2 },
    },
    "postcss-loader",
    "sass-loader",
  ],
}

这用于拆分：

optimization: {
concatenateModules: true,
runtimeChunk: "single",
splitChunks: {
  chunks: "all",
  maxInitialRequests: Infinity,
  minSize: 0,
  cacheGroups: {
    vendor: {
      test: /[\\/]node_modules[\\/]/,
      name: module => {
        const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
        return `npm.${packageName.replace("@", "")}`;
      },
    },
  },
},

使用这个插件：

new MiniCssExtractPlugin({
  filename: "css/[name].[chunkhash:7].min.css",
  chunkFilename: "css/[name].[chunkhash:7].min.css",
})

如果我现在在自定义文件中导入引导程序.scss（以自定义变量）。Bootstrap 没有添加到我的供应商 css 文件中，而是我的主 css 文件中。有什么办法可以告诉 webpack 将引导程序中的 css 添加到供应商 css 文件中？

标签： webpacksasscode-splitting

解决方案

推荐阅读