使用 webpack ExtractTextPlugin 获取 css 输出 [英] Getting css output using webpack ExtractTextPlugin
问题描述
我正在尝试使用 ExtractTextPlugin 使 css 需要在 webpack 中工作，但没有成功
I am trying to get css requires to work in webpack using the ExtractTextPlugin but with no success
我想要一个单独的 css 文件而不是内联任何 css.
I want a separate css file rather than inlining any css.
这是我的 webpack 配置:
Here is my webpack config:
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./scripts/index'
],
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js',
publicPath: '/scripts/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new ExtractTextPlugin('styles/styles.css', {
allChunks: true
})
],
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'scripts')
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
}]
}
};
index.js:
import React from 'react';
import App from './App';
React.render(<App />, document.getElementById('root'));
App.js:
import React from 'react';
require('../styles/app.css');
export default class App extends React.Component {
render() {
return (
<h1>Hello, world.</h1>
);
}
}
index.html:
index.html:
<html>
<head>
<link rel="stylesheet" href="/styles/styles.css">
</head>
<body>
<div id='root'></div>
</body>
<script src="/scripts/bundle.js"></script>
</html>
styles.css 返回 404
styles.css is returning 404
知道这里可能出了什么问题.如果我不使用 ExtractTextPlugin 而只是在配置中执行此操作:
Any idea what could be going wrong here. If I don't use the ExtractTextPlugin and just do this in config:
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
然后我将 css 正确应用于页面，但显然这不是来自 css 文件
then I get the css applied to the page correctly but obviously this is not coming from a css file
这是我第一次尝试使用 webpack，所以可能犯了一些菜鸟错误
This is my first attempt at using webpack so probably doing some noob mistake
有什么想法吗?
推荐答案
ExtractTextPlugin 需要在两个地方添加:在加载器中，以及作为插件.这是从样式表文档中提取的示例.
ExtractTextPlugin needs to be added in two spots: in the Loader, and as a Plugin. Here's the example pulled from the stylesheets documentation.
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
// The standard entry point and output config
entry: {
posts: "./posts",
post: "./post",
about: "./about"
},
output: {
filename: "[name].js",
chunkFilename: "[id].js"
},
module: {
loaders: [
// Extract css files
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
// Optionally extract less files
// or any other compile-to-css language
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
}
// You could also use other loaders the same way. I. e. the autoprefixer-loader
]
},
// Use the plugin to specify the resulting filename (and add needed behavior to the compiler)
plugins: [
new ExtractTextPlugin("[name].css")
]
}
这篇关于使用 webpack ExtractTextPlugin 获取 css 输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
