首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >webpack生产建设中未提取的Vue证监会风格

webpack生产建设中未提取的Vue证监会风格
EN

Stack Overflow用户
提问于 2018-12-12 05:58:52
回答 1查看 1.8K关注 0票数 2

试图将vue (和SFCs)添加到我的webpack应用程序中。<template><script>块可以很好地工作,但是由于某种原因,<style>块中的样式没有被提取用于生产构建。

在dev构建中,它将.vue <style>块提取为一个单独的css文件(以入口点命名)。这是好的,但我更希望他们进入我的主要样式表。

但是,无论我如何尝试,我都无法获得(在任何文件中)用于生产构建的任何.vue样式。

这是我的webpack配置的简写版本:

代码语言:javascript
运行
复制
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文件是这个演示一。我试图将它导入到名为“testview”的入口点中,该入口点包含以下内容:

代码语言:javascript
运行
复制
import Vue from "vue";
import MainContent from "../components/main-content";
let MainComponent = Vue.extend(MainContent);
new MainComponent().$mount("#mainContent");
EN

回答 1

Stack Overflow用户

发布于 2018-12-12 06:27:04

我想出来了。我不得不将sideEffects: false从我的package.json中删除。这个问题进一步解释了这一点。

仍然想知道如何将.vue样式提取到我的主要样式表中,就像现在的情况一样,.vue样式正在提取到一个单独的样式表中(开发和生产)。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53736904

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档