Dan*_*l L 5 webpack vue.js webpack-dev-server vue-component
Webpack 正在编译单个文件组件，但不加载 CSS。HTML 和 Vue 正确呈现，但没有 CSS。这似乎是 webpack 配置的问题。知道出了什么问题吗？
我正在使用webpack-dev-server加载开发服务器。
源代码/索引.html
<html>
<head>
<title>Vue Hello World</title>
</head>
<body>
<h1>Header</h1>
<div id="app"></div>
</body>
</html>
源代码/你好.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>
源代码/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(),
]
};
MvR*_*ens 23
我只是花了最后 4 个小时来解决这个问题。我只想使用 Webpack，因为它比 Vue CLI 更好地集成到我的 Gulp 管道中。不确定您使用的是哪个版本的 css-loader 以及是否是相同的原因，但希望这也能帮助您。
TL;DR: 而不仅仅是“css-loader”，使用：
{
loader: 'css-loader',
options: {
esModule: false
}
}
我使用具有相同问题的 SCSS，但对于您的示例，它将是：
{ test: /\.css$/, exclude: /node_modules/, use: ['vue-style-loader', { loader: 'css-loader', options: { esModule: false }}]}
我不确定这是一个合适的解决方案还是只是一种解决方法。我想通了这一点，因为我有一个以前可以运行的旧项目，但是一旦我升级了所有软件包，它就失败了。最终我将其追溯到 css-loader，它是更新前的 2.1 版和更新后的 4.3 版。它运行到 3.6 版，然后在 4.0 中失败了。然后我只是尝试切换各种选项，这是修复它的选项（我从未声称知道我在做什么;-)）。
编辑：seiluv在 vue-style-loader 的 Github 上添加了一个评论链接，确认这是一种解决方法。它显然是在一个月前发布的，但我在寻找答案时没有找到它。谢谢塞卢夫！
我遇到了同样的问题，所以要么：
正如这里所建议的。
use: ['style-loader', 'css-loader']
基本上升级到 css-loader 4.xx + 不能很好地与 vue-style-loader 配合使用。
或者
MvRens的解决方案也是有效的，并由github 上的此评论确认。
问题是 css-loader 的esModule默认设置为 true，在这种情况下应该是 false。
| 归档时间： |
|
| 查看次数： |
2760 次 |
| 最近记录： |