Vue SFC 样式未在 webpack 生产构建中提取

Posted 2023-02-22

【中文标题】Vue SFC 样式未在 webpack 生产构建中提取

【英文标题】：Vue SFC styles not being extracted in webpack production build

【发布时间】：2019-05-13 04:43:38

【问题描述】：

尝试将 vue（和 SFC）添加到我的 webpack 应用程序中。 <template> 和 <script> 块工作正常，但由于某种原因，<style> 块中的样式没有被提取用于生产构建。

在开发版本中，它将 .vue <style> 块提取到单独的 css 文件（以入口点命名）。没关系，但我希望它们进入我的主样式表。

但无论我尝试什么，我都无法为生产构建显示任何 .vue 样式（在 any 文件中）。

这是我的 webpack 配置的缩写版本：

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`,
      )
    ]
  ;
;

我使用的 .vue 文件是 demo one。我正在尝试将其导入名为“testview”的入口点，其中仅包含：

import Vue from "vue";
import MainContent from "../components/main-content";
let MainComponent = Vue.extend(MainContent);
new MainComponent().$mount("#mainContent");

【参考方案1】：

确实想通了。我不得不从我的 package.json 中删除 sideEffects: false。这个issue 进一步解释了它。

仍然想知道如何将 .vue 样式提取到我的主样式表 就像现在一样，.vue 样式正在提取到单独的样式表（开发和生产）。