将vuetify样式提取到css文件
我正在做一个概念验证,将vuetify包含在已经部分使用vue的现有web应用程序中 我担心的是,默认情况下,所有vuetify样式都被推入内联将vuetify样式提取到css文件,css,webpack,vuetify.js,content-security-policy,Css,Webpack,Vuetify.js,Content Security Policy,我正在做一个概念验证,将vuetify包含在已经部分使用vue的现有web应用程序中 我担心的是,默认情况下,所有vuetify样式都被推入内联标记中。我不想在我的CSP中允许样式src“不安全内联” 到目前为止,vuetify在部分插入了95个内联样式标记。我确实尝试过像上面描述的那样放置nonce,但是nonce只添加到最后一个标记上,所以还有94个。此外,我没有生成nonce的固溶体,所以我不想依赖它 当然,为每个标记生成哈希是不现实的 我也看到了,但我不认为它适用于我的上下文,我不是服务
标记中。我不想在我的CSP中允许样式src“不安全内联”
到目前为止,vuetify在
部分插入了95个内联样式标记。我确实尝试过像上面描述的那样放置nonce,但是nonce只添加到最后一个标记上,所以还有94个。此外,我没有生成nonce的固溶体,所以我不想依赖它
当然,为每个标记生成哈希是不现实的
我也看到了,但我不认为它适用于我的上下文,我不是服务器端渲染
我正在使用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
});
我终于找到了解决方案,我已经导入了
MiniCssExtractPlugin
,但将其与less
模块一起使用,但我还必须将其添加到vuetify使用的sass
模块中
{
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
}
}
}
]
}
{
测试:/\.s(c|a)ss$/,
使用:[
“vue样式加载程序”,
MiniCssExtractPlugin.loader//