3

我正在使用 Webpack 4 设置，我试图将我的所有 css 放入一个包中，包括 .vue 文件中的作用域 css。我正在使用 MiniCssExtractPlugin 从文件中提取 css，并使用 SplitChunksPlugin 将所有 css 捆绑到一个文件中。问题是我的 .vue 文件中的作用域 css 被放入单独的 css 文件中。

我的 webpack 配置：

optimization: {
splitChunks: {
  cacheGroups: {
    common: {
      test: /[\\/]node_modules[\\/].*\.js$/,
      name: 'common',
      chunks: 'all'
    },
    styles: {
      test: /\.css$/,
      filename: '[name]-[contenthash].css',
      chunks: 'all',
      enforce: true
    }
  }
 }
},
module: {
  rules: [
    {
      enforce: 'pre',
      test: /\.(js|vue)$/,
      exclude: /node_modules/,
      use: 'eslint-loader'
    },
    {
      test: /\.vue$/,
      use: 'vue-loader'
    },
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: 'babel-loader'
    },
    {
      test: /\.(sa|sc|c)ss$/,
      exclude: /node_modules/,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
          options: {
            importLoaders: 3,
            sourceMap: true
          }
        },
        {
          loader: 'postcss-loader',
          options: {
            sourceMap: true
          }
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true,
            indentedSyntax: true
          }
        }
      ]
    }
  ]
},
plugins: [
  new VueLoaderPlugin(),
  new MiniCssExtractPlugin({
    filename: '[name].[contenthash].css'
  }),
  new PurifyCSSPlugin({
    paths: glob.sync([
      path.join(__dirname, 'templates/**/*.html'),
      path.join(__dirname, 'assets/js/**/*.js'),
      path.join(__dirname, 'assets/js/**/*.vue')
    ]),
    purifyOptions: {
      info: true,
      minify: true,
      rejected: true
    }
  })
],
resolve: {
  alias: {
    jquery: 'jquery/src/jquery',
    'vue': 'vue/dist/vue.js'
  },
  extensions: ['.js', '.vue', '.json', '.sass']
}

输出：

scoped-css-from-a-vue-file.03371a6565c9f56951dd.css // (172 bytes)
main-css-bundle-from-sass-files.af5152091d41a56d9bdd.css // (303 KiB)
4

0 回答 0