将 vuetify 样式提取到 css 文件

Question

我正在进行概念验证，以将 vuetify 包含在已经部分使用 vue 的现有 Web 应用程序中。

我担心 CSP，默认情况下，所有 vuetify 样式都被推送到内联 <style> 标签中。我不想在我的 CSP 中允许 style-src 'unsafe-inline'。

到目前为止，vuetify 在 <head> 部分插入了 95 个内联样式标签。我确实尝试过像 here 中描述的那样放置随机数的选项，但是随机数只添加到最后一个标签上，所以还有 94 次。此外，我没有生成随机数的可靠解决方案，所以我不想依赖它。

为每个标签生成哈希当然是不现实的。

我也看到了，但我认为它不适用于我的上下文，我不是服务器端渲染。

我正在使用 webpack 4.41.2、vue 2.6.10、vuetify 2.2.8。

这里是一些配置文件的摘录。 webpack.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

[...]

et entryPoints = Object.assign([...], { vendor: ['vue', 'vue-router', 'axios', 'vue-i18n', 'lodash', 'interactjs'] });

var config = {
   entry: entryPoints,
   output: {
      path: __dirname,
      filename: 'module/[name].js'
   },
   [...]

   plugins: [
      new MiniCssExtractPlugin({ filename: 'module/[name].css', chunkFilename: 'module/[name].css' }),
      new VueLoaderPlugin(),
      new VuetifyLoaderPlugin()
   ],

   optimization: {
      splitChunks: {
         cacheGroups: {
            commons: {
               test: /[\/]node_modules[\/]/,
               name: 'vendor',
               chunks: 'all'
            }
         }
      },
      runtimeChunk: { name: 'manifest' }
   }
};

初始化文件

import Vue from 'vue';

import Vuetify from 'vuetify/lib';
import 'vuetify/dist/vuetify.min.css';

[...]

Vue.use(Vuetify);
const vuetifyOptions = new Vuetify();

// Création de l'instance Vue.js, qui sera dessiner dans l'element définit par l'attribut el
window.Vue = new Vue({
   el: '#app',
   render: h => h(App),
   vuetify: vuetifyOptions
});

Answer 1

我终于找到了解决方案，我已经在导入 MiniCssExtractPlugin，但它与 less 模块一起使用，但我还必须将它添加到 sass 模块，由 vuetify 使用.

         {
            test: /\.s(c|a)ss$/,
            use: [
               'vue-style-loader',
               MiniCssExtractPlugin.loader, // <-- that line
               'css-loader',
               {
                  loader: 'sass-loader',
                  // Requires sass-loader@^8.0.0
                  options: {
                     implementation: require('sass'),
                     sassOptions: {
                        fiber: require('fibers'),
                        indentedSyntax: true // optional
                     }
                  }
               }
            ]
         }

将 vuetify 样式提取到 css 文件

Extract vuetify styles to css file

css

content-security-policy

webpack

vuetify.js