Webpack 不加载 Vue 的单文件组件 CSS [英] Webpack not loading Vue's single file components CSS
问题描述
Webpack 正在编译单个文件组件，但不加载 CSS.HTML 和 Vue 正确呈现，但没有 CSS.这似乎是 webpack 配置的问题.知道出了什么问题吗?
Webpack is compiling single file components but not loading CSS. The HTML and Vue is rendered correctly but without CSS. It seems to be an issue with webpack configuration. Any idea what's wrong?
我正在使用 webpack-dev-server 加载开发服务器.
I'm using webpack-dev-server to load the development 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(),
]
};
推荐答案
我刚刚花了 4 个小时来解决这个问题.我只想使用 Webpack，因为它比 Vue CLI 更好地集成到我的 Gulp 管道中.不确定您使用的是哪个版本的 css-loader 以及是否是相同的原因，但希望这也能帮助您.
I just spent the last 4 hours figuring this out. I wanted to use only Webpack because it integrates much nicer into my Gulp pipeline than Vue CLI does. Not sure what version of css-loader you're on and if it's the same cause, but hope this helps you out as well.
TL;DR:而不是仅仅使用 'css-loader'，使用:
TL;DR: instead of just 'css-loader', use:
{
loader: 'css-loader',
options: {
esModule: false
}
}
我使用的 SCSS 有同样的问题，但对于你的例子来说:
I use SCSS which has the same problem, but for your example that would be:
{ 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 中失败了.然后我只是尝试切换各种选项，这是修复它的选项(我从未声称知道我在做什么;-)).
I'm not sure if this is a proper solution or just a workaround. I figured this out because I had an old project that worked before, but as soon as I upgraded all packages it failed. Eventually I traced it down to css-loader, which was version 2.1 before and 4.3 after the update. It worked up to version 3.6, then with 4.0 it failed. Then I just tried toggling the various options and this was the one that fixed it (I never claimed to know what I was doing ;-)).
编辑:seiluv 添加了一个链接到 评论 对 vue-style-loader 的 Github 确认这是一种解决方法.它显然是在一个月前发布的，但我在寻找答案时没有找到它.谢谢seiluv！
Edit: seiluv added a link to a comment on vue-style-loader's Github that confirms this as a workaround. It was apparantly posted a month before, but I did not find it in my search for an answer. Thanks seiluv!
这篇关于Webpack 不加载 Vue 的单文件组件 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
