Webpack生产版本中未提取Vue SFC样式 [英] Vue SFC styles not being extracted in webpack production build
问题描述
尝试将vue(和SFC)添加到我的Webpack应用中. <template>
和<script>
块可以正常工作,但是由于某些原因,没有提取<style>
块中的样式进行生产构建.
Trying to add vue (and SFCs) to my webpack app. The <template>
and <script>
blocks work fine, but for some reason the styles in the <style>
block are not being extracted for production build.
在开发版本中,它将.vue <style>
块提取到一个单独的css文件(以入口点命名).可以,但是我希望他们进入我的主要样式表.
In the dev build, it's extracting the .vue <style>
block to a separate css file (named for the entrypoint). Which is OK but I'd prefer they went into my main stylesheet.
但是无论我如何尝试,我都无法在生产版本中显示任何.vue样式(在任何文件中).
But no matter what I try, I can't get any .vue styles to show up (in any file) for the production build.
这是我的webpack配置的缩写版本:
This is an abbreviated version of my webpack config:
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
...
module.exports = (env) => {
return {
entry: {
app: ["./src/polyfills.js", "./src/scss/styles.scss", "./src/app.js"],
...
testview: "./src/js/views/TestView.js"
},
output: {
path: assets,
filename: "[name].[hash].js",
publicPath: "/static/"
},
resolve: {
modules: ["node_modules", "src"],
alias: {
vue$: "vue/dist/vue.esm.js"
},
extensions: ["*", ".js", ".vue"]
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.js?$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
targets: {
browsers: ["> 1%", "last 2 versions", "ie >= 11"]
}
}
]
],
plugins: ["@babel/plugin-proposal-class-properties"],
code: true,
comments: true,
cacheDirectory: true,
babelrc: false
}
}
]
},
{
test: /\.s?[ac]ss$/,
use: [
"vue-style-loader",
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
sourceMap: ifNotProduction()
}
},
{
loader: "postcss-loader",
options: {
ident: "postcss",
sourceMap: ifNotProduction(),
plugins: () =>
ifProduction([
require("autoprefixer")({
preset: "default"
}),
require("cssnano"),
require("css-mqpacker")
])
}
},
{
loader: "sass-loader",
options: {
sourceMap: ifNotProduction()
}
}
]
}
]
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: "commons",
chunks: "initial",
minChunks: 2,
minSize: 0
},
styles: {
name: "styles",
test: /\.css$/,
chunks: "all",
enforce: true
}
}
},
occurrenceOrder: true
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: "style.[hash].css"
}),
new HtmlWebpackPlugin({
hash: true,
inject: false,
template: "./src/jinja-templates/base.html.j2",
filename: `${templates}/base.html.j2`,
})
]
};
};
The .vue file I'm using is this demo one. I'm trying to import it into the entrypoint called 'testview' which contains simply:
import Vue from "vue";
import MainContent from "../components/main-content";
let MainComponent = Vue.extend(MainContent);
new MainComponent().$mount("#mainContent");
推荐答案
知道了.我必须从package.json中删除sideEffects: false
.此问题对其进行了进一步解释.
Did figure it out. I had to remove sideEffects: false
from my package.json. This issue explains it further.
还是想知道如何将.vue样式提取到我的主样式表中.到目前为止,.vue样式正在提取到单独的样式表中(开发和生产).
Still would like to know how to extract the .vue styles to my main stylesheet As it is now, the .vue styles are extracting to a separate stylesheet (dev and production).
这篇关于Webpack生产版本中未提取Vue SFC样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!