文章/答案/技术大牛

发布

社区首页 >问答首页 >不应用webpack样式配置Vue框架。

问不应用webpack样式配置Vue框架。
EN

Stack Overflow用户

提问于 2020-09-11 10:02:20

回答 1查看 88关注 0票数 0

我在配置webpack的Vue框架时遇到了问题。更准确地说，问题在于单个文件组件中包含在<style>标记中的样式。尽管我的配置看起来与许多有关此配置过程的教程完全相同，但这些样式并不适用。在webpack的建设过程中没有任何错误。下面我包含了一些代码片段，希望有人能找到错误，或者只是缺少了一些东西。

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>

浏览器中的最终结果：

sass

javascript

html

vue.js

webpack

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-09-11 11:54:29

问题似乎来自于默认情况下的css-loader启用esModule，这导致了问题。我认为当你关掉它的时候，它应该起作用：

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

票数 1

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

原文链接：

https://stackoverflow.com/questions/63844880

复制

相似问题

问不应用webpack样式配置Vue框架。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不应用webpack样式配置Vue框架。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不应用webpack样式配置Vue框架。
EN