作者:雅茹敬俐6999 | 来源:互联网 | 2023-01-29 10:53
以下是我的文件夹结构及用于文件React
项目,这是工作的罚款,但我无法添加CSS
通过SCSS
通过Webpack
使用extract-text-webpack-plugin
.让我知道我在配置上做错了什么.
文件夹结构 -
Webpack.config.js文件 -
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginCOnfig= new HtmlWebpackPlugin({
template: './app/index.html',
filename: 'index.html',
inject: 'body'
});
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ExtractTextPluginCOnfig= new ExtractTextPlugin('main.css',{
allChunks: true
});
module.exports = {
entry: './app/app.jsx',
output: {
path: path.resolve('dist'),
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
loaders: [
{test: /.js$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}
]
},
plugins: [HtmlWebpackPluginConfig, ExtractTextPluginConfig]
};
Package.json -
{
"name": "reactyarn",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --hot"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^2.29.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"webpack": "^3.3.0",
"webpack-dev-server": "^2.5.1"
},
"dependencies": {
"path": "^0.12.7",
"react": "^15.6.1",
"react-dom": "^15.6.1"
}
}
仅供参考 -
我没有在控制台中收到任何JS错误,所以我相信它只是配置不起作用.