在我的元素中,我将 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
只有 JS 文件在 ./public
映射中创建:
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)
最佳答案
确保您需要样式文件。 例如
require('../sass/app.scss');
而且我认为您也需要样式加载器 例如
{
test : /\.scss$/,
include : path.join(__dirname, 'sass'),
loaders : ["style", "css", "sass"]
}
这三个加载器执行以下操作
- 打开您的
scss
文件到普通CSS
使用 sass 加载器 - 解决所有
imports
和url(...)s
在CSS
借助 CSS 加载器 - 使用样式加载器将这些样式插入到页面中
关于javascript - Webpack 只生成 JS,没有来自 SCSS 的 CSS 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35997943/