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

Posted

技术标签:

【中文标题】使用 webpack 配置 Vue 框架 - 不应用样式【英文标题】：Configuring Vue framework with webpack - styles are not applied 【发布时间】：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>

浏览器中的最终结果：

【问题讨论】：

【参考方案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

以上是关于使用 webpack 配置 Vue 框架 - 不应用样式的主要内容，如果未能解决你的问题，请参考以下文章

如何在 vue-cli 项目中配置 webpack css loader

不使用 vue-cli 与 vue 模版，使用 Vue2.x + webpack4.x 从零开始一步步搭建项目框架

使用vue2.x+webpack+vuex+sass+axios+elementUI等快速搭建前端项目框架

Vue项目Webpack优化实践，构建效率提高50%

基于webpack的构建方案引入vue后的相关配置

原创从零开始搭建Electron+Vue+Webpack项目框架，一套代码，同时构建客户端web端