Javascript Webpack 不加载 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34963051/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack not loading css
提问by Claudia
This is my first time trying to set up Webpack, so I'm sure I'm missing something here.
这是我第一次尝试设置 Webpack，所以我确定我在这里遗漏了一些东西。
I am trying to load my PostCSS files with Webpack, using the ExtractTextPlugin to generate a css file into "dist". The problem is Webpack does not seem to pick up the css files. They are under "client/styles", but I've tried moving them to "shared", with the same result.
我正在尝试使用 Webpack 加载我的 PostCSS 文件，使用 ExtractTextPlugin 将 css 文件生成到“dist”中。问题是 Webpack 似乎没有选择 css 文件。它们位于“客户端/样式”下，但我尝试将它们移至“共享”，结果相同。
I ran Webpack with the --display-modules option, and verified that no css files display there.
我使用 --display-modules 选项运行 Webpack，并验证那里没有显示任何 css 文件。
I have tried running it without the extract text plugin, and the result is the same: no CSS is built into bundle.js.
我试过在没有提取文本插件的情况下运行它，结果是一样的：bundle.js 中没有内置 CSS。
Here is my prod config:
这是我的产品配置：
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
module.exports = {
entry: [
'./client'
],
resolve: {
modulesDirectories: ['node_modules', 'shared'],
extensions: ['', '.js', '.jsx', '.css']
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
chunkFilename: '[id].js',
publicPath: '/'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['babel']
},
{
test: /\.css?$/,
loader: ExtractTextPlugin.extract(
'style-loader',
'css-loader!postcss-loader'
),
exclude: /node_modules/
}
]
},
plugins: [
new ExtractTextPlugin('[name].css')
],
postcss: (webpack) => [
require('postcss-import')({ addDependencyTo: webpack, path: ['node_modules', 'client'] }),
require('postcss-url')(),
require('precss')(),
require('postcss-fontpath')(),
require('autoprefixer')({ browsers: [ 'last 2 versions' ] })
]
};
And here's an example of my main css file: @import 'normalize.css/normalize';
这是我的主要 css 文件的示例：@import 'normalize.css/normalize';
/* Variables */
@import 'variables/colours';
/* Mixins */
/* App */
/* Components */
body {
background-color: $black;
}
Would anyone have an idea on why this is happening? Am I missing something?
有没有人知道为什么会这样？我错过了什么吗？
Thank you
谢谢
采纳答案by sandeep
Since you are using style-loader and css-loader. You can include css in the js file itself. You can just require(style.css)or import 'style.css'(if using ES6) in the javascript file which is using the styles. No need to provide an entry point to webpackfor css.
由于您使用的是 style-loader 和 css-loader。您可以在 js 文件本身中包含 css。您可以在使用样式的 javascript 文件中使用require(style.css)或import 'style.css'（如果使用 ES6）。无需为 css提供webpack的入口点。
Hope it helps.
希望能帮助到你。
回答by Claudia
So, after three hours of hitting my head against the wall, I finally got it. I hope this will help someone in the future.
所以，在我的头撞墙三个小时后，我终于明白了。我希望这会在将来对某人有所帮助。
All I needed to do was to add './client/styles/main.css'to the entry points. Yey.
我需要做的就是添加'./client/styles/main.css'到入口点。是的。
