【发布时间】：2023-03-15 22:48:02
【问题描述】：
Webpack 正在编译单个文件组件但不加载 CSS。 HTML 和 Vue 正确呈现，但没有 CSS。这似乎是 webpack 配置的问题。知道有什么问题吗？
我正在使用webpack-dev-server 加载开发服务器。
src/index.html
<html>
<head>
<title>Vue Hello World</title>
</head>
<body>
<h1>Header</h1>
<div id="app"></div>
</body>
</html>
src/Hello.vue
<template>
<p>{{ greeting }} Test!</p>
</template>
<script>
module.exports = {
data : function () {
return {
greeting: 'Hello'
}
}
}
</script>
<style scoped>
p {
font-size: 18px;
font-family: 'Roboto', sans-serif;
color: blue;
}
</style>
src/main.js
import Vue from 'vue';
import Hello from './Hello.vue';
new Vue({
el: '#app',
render: h => h(Hello),
});
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: './src/main.js',
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' },
{ test: /\.vue$/, exclude: /node_modules/, use: 'vue-loader' },
{ test: /\.css$/, exclude: /node_modules/, use: ['vue-style-loader', 'css-loader']},
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new VueLoaderPlugin(),
]
};
【问题讨论】：
-
有什么理由不使用 Vue CLI？
-
根据the documentation，作用域 CSS 是通过使用 PostCSS 实现的。考虑到这一点，你有configured PostCSS吗？
-
我认为 postCSS 不是问题，我已经通过 npm 添加它并添加到 webpack css 链中，但仍然无法正常工作。它必须与 webpack 配置有关，因为在运行 vue-cli-service 时它确实有效。我没有使用 Vue CLI，因为当你初始化一个项目时，它会添加很多包和复杂的配置。启动一个简单的“Hello World”项目应该更容易。
-
虽然我不同意您对 Vue CLI 的分析，但我尊重您的意见。您可以尝试的一件事是使用 Vue CLI 设置一个空项目，然后运行
vue inspect > config.js转储生成的 Webpack 配置。那么至少你可以看到你错过了什么 -
就像一个注释...今天
postcss与@vue/compiler-sfc捆绑在一起，而您不需要完全需要配置它来获得vue-loader的作用域CSS .
标签： vue.js webpack vue-component webpack-dev-server