使用 webpack 配置 Vue 框架 - 不应用样式答案

【问题标题】：Configuring Vue framework with webpack - styles are not applied使用 webpack 配置 Vue 框架 - 不应用样式
【发布时间】：2020-12-29 20:21:36
【问题描述】：

我在使用 webpack 配置 Vue 框架时遇到问题。更准确地说，问题在于单个文件组件中 <style> 标记中包含的样式。即使我的配置看起来与许多关于此配置过程的教程完全相同，这些样式也不会应用。 webpack 构建过程中没有错误。下面我包含一些代码 sn-ps，希望有人可以在其中找到错误或缺少某些东西。

Webpack 配置文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    entry: './src/app.js',
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[contenthash].bundle.js'
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        port: 8080
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /[\\/]node_modules[\\/]/,
                loader: 'babel-loader'
            },
            {
                test: /\.vue$/,
                exclude: /[\\/]node_modules[\\/]/,
                loader: 'vue-loader',
            },
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
        ]
    },
    resolve: {
        extensions: ['.js', '.vue'],
        alias: {
            '@components': path.resolve(__dirname, 'src/components'),
        }
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './src/assets/index.html',
            filename: 'index.html'
        }),
        new CleanWebpackPlugin({
            cleanStaleWebpackAssets: false
        }),
    ],
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
}

webpack 的主入口文件：

import Vue from 'vue';
import TestComponent from '@components/TestComponent';

new Vue({
    el: "#app",
    render: h => h(TestComponent)
});

TestComponent 文件：

<template>
    <h class="header">from {{ name }}</h>
</template>

<script>
export default {
    name: 'TestComponent',
    data() {
        return {
            name: 'TestComponent'
        }
    }
}
</script>

<style lang="scss" scoped>
.header {
    color: red;
    font-size: 50px;
    margin-left: 100px;
}
</style>

index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

浏览器中的最终结果：

【问题讨论】：

标签： javascript html vue.js webpack sass

【解决方案1】：

看起来问题出在css-loader 默认启用esModule 导致问题。我认为它应该在你关闭它时工作：

{
  loader: 'css-loader',
  options: {
    esModule: false // it's supposed to be turned off
  },
},

【讨论】：

非常感谢！ Vue 是否期望 CommonJS 语法或问题性质不同？奇怪的是，每个教程甚至在 Vue 官方教程中都没有包含此类信息。
我认为css-loader的v4版本默认启用了这个选项，这使得没有人知道这个github.com/webpack-contrib/css-loader/releases/tag/v4.0.0