在我的项目中,我将Webpack与React和NodeJS一起使用。我想生成bundle.js
和style.css
文件。目前我有以下代码:
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
entry: './index.js',
output: {
path: 'public',
filename: 'bundle.js',
publicPath: ''
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass') }
]
},
plugins: [
new ExtractTextPlugin('public/style.css')
]
}
但是,当我运行webpack
时,只会在./public
地图中创建JS 文件:
Asset Size Chunks Chunk Names
bundle.js 844 kB 0 [emitted] main
+ 222 hidden modules
以下示例/教程仅面向CSS文件,或明显的错误,如未实现ExtractText。
我还下载了包sass-loader node-sass
。在一些例子中,我确实发现了包含的那些包,有些则没有。
编辑(需要index.js中的样式):
import React from 'react'
import { render } from 'react-dom'
import { Router, browserHistory } from 'react-router'
import routes from './modules/routes'
require('./public/style.css')
render(
<Router routes={routes} history={browserHistory} />,
document.getElementById('app')
)
编辑(webpack.config.js):
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{
test : /\.scss$/,
include : path.join(__dirname, './public/sass'),
loaders : ["style", "css", "sass"]
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
}
]
},
sassLoader: {
includePaths: [path.join(__dirname, './public/sass')]
},
plugins: [
new ExtractTextPlugin(path.join(__dirname, './public/style.css'))
]
我的文件夹结构如下所示:
webpack.config.js
index.js
/public
index.html
bundle.js (generated)
/sass
style.scss
basics.scss (imported in style.scss)
答案 0 :(得分:3)
确保您需要样式文件。 e.g。
require('../sass/app.scss');
我认为你也需要样式加载器 e.g。
{
test : /\.scss$/,
include : path.join(__dirname, 'sass'),
loaders : ["style", "css", "sass"]
}
这三个加载器执行以下操作
scss
文件转换为普通CSS
imports
中的所有url(...)s
和CSS
答案 1 :(得分:0)
您需要ExtractTextPlugin和样式加载器的组合。
ls -1tr /home/jdoe/checks/downloads/*.md5 | head -n -2 | while read f; do
#rm -f "$f"
print "file to delete is $f"
done
在我的工作配置中,我还有一个可能无关紧要的条目:
module: {
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader'),
},
],
}
...
plugins: [
new ExtractTextPlugin(path.join(__dirname, 'public', 'style.css')),
],
另一个错误可能是您在resolve: {
loaders: [
{
test: /\.(css|scss)$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
},
],
},
中包含它的方式。您使用的是index.js
而不是require('./public/style.css')
。