我正在尝试建立一个React项目并设法正确添加组件。现在，我正在尝试将CSS添加到该项目中，但是我遇到了困难。
我尝试了无数方法，但都没有结果，并且我对如何做到这一点有一些基本的了解，但是没有任何尝试。我已经添加了加载程序和必要的插件，但是我总是遇到错误。我尝试过并且我认为是正确的一种方法是：
npm install --save-dev style-loader css-loader
然后在rules.js中：
...
{
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader']
}
这些是我的文件：
paths.js
import path from 'path';
module.exports = {
root: path.resolve(__dirname, '../', '../'),
outputPath: path.resolve(__dirname, '../', '../', 'build'),
entryPath: path.resolve(__dirname, '../', '../', 'src/index.js'),
templatePath: path.resolve(__dirname, '../', '../', 'public/index.html'),
imagesFolder: 'images',
fontsFolder: 'fonts',
cssFolder: 'css'
}
rules.js
module.exports = [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
exclude: /node_modules/,
loader: 'file-loader'
},
{
test: /\.(woff|woff2)$/,
exclude: /node_modules/,
loader: 'url-loader?prefix=font/&limit=5000'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
exclude: /node_modules/,
loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: ['url-loader?limit=10000', 'img-loader']
}
];
webpack.common.babel.js
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import paths from './paths';
import rules from './rules';
module.exports = {
entry: paths.entryPath,
module: {
rules
},
resolve: {
modules: ['src', 'node_modules'],
extensions: ['*', '.js', '.scss', '.css']
},
plugins: [
new webpack.ProgressPlugin(),
new HtmlWebpackPlugin({
template: paths.templatePath,
minify: {
collapseInlineTagWhitespace: true,
collapseWhitespace: true,
preserveLineBreaks: true,
minifyURLs: true,
removeComments: true,
removeAttributeQuotes: true
}
})
]
};
webpack.dev.babel.js
import webpack from 'webpack';
import paths from './paths';
import rules from './rules';
module.exports = {
mode: 'development',
output: {
filename: '[name].js',
path: paths.outputPath,
chunkFilename: '[name].js'
},
module: {
rules
},
performance: {
hints: 'warning',
maxAssetSize: 450000,
maxEntrypointSize: 8500000,
assetFilter: assetFilename => {
return (
assetFilename.endsWith('.css') || assetFilename.endsWith('.js')
);
}
},
optimization: {
splitChunks: {
chunks: 'all'
}
},
devServer: {
contentBase: paths.outputPath,
compress: true,
hot: true,
historyApiFallback: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
webpack.prod.babel.js
import CleanWebpackPlugin from 'clean-webpack-plugin';
import paths from './paths';
import rules from './rules';
module.exports = {
mode: 'production',
output: {
filename: `${paths.jsFolder}/[name].[hash].js`,
path: paths.outputPath,
chunkFilename: '[name].[chunkhash].js'
},
module: {
rules
},
plugins: [
new CleanWebpackPlugin([paths.outputPath.split('/').pop()], {
root: paths.root
})
],
devtool: 'source-map'
};
webpack.config.js
require('@babel/register');
const webpackMerge = require('webpack-merge');
const common = require('./config/webpack/webpack.common.babel');
const envs = {
development: 'dev',
production: 'prod'
};
/* eslint-disable global-require,import/no-dynamic-require */
const env = envs[process.env.NODE_ENV || 'development'];
const envConfig = require(`./config/webpack/webpack.${env}.babel`);
module.exports = webpackMerge(common, envConfig);
package.json
{
"name": "photoly",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --open"
},
"author": "Nikolas Pitsillos",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.4.4",
"@babel/core": "^7.4.5",
"@babel/node": "^7.4.5",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/plugin-proposal-object-rest-spread": "^7.4.4",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-syntax-import-meta": "^7.2.0",
"@babel/plugin-transform-async-to-generator": "^7.4.4",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.4.4",
"@babel/runtime": "^7.4.5",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.8.0",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^2.0.2",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^4.3.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-import": "^2.17.2",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-react": "^7.13.0",
"file-loader": "^3.0.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"img-loader": "^3.0.1",
"prettier": "^1.17.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"url-loader": "^1.1.2",
"webpack": "^4.32.2",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.4.1",
"webpack-merge": "^4.2.1"
},
"dependencies": {
"bootstrap": "^4.3.1",
"cross-env": "^5.2.0",
"react-bootstrap": "^1.0.0-beta.8",
"react-redux": "^7.0.3",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0"
}
}
这是我的index.js文件：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app/App';
import '../node_modules/bootstrap/dist/css/bootstrap'
ReactDOM.render(
<App />,
document.getElementById('root')
);
运行npm start后出现的错误
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css 7:0
Module parse failed: Unexpected token (7:0)
You may need an appropriate loader to handle this file type.
| * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
| */
> :root {
| --blue: #007bff;
| --indigo: #6610f2;
@ ./src/index.js 4:0-54
谢谢您的帮助。如果这太复杂以至于无法解决，请有人指导我使用完整的React，Webpack，Babel以及对CSS / Sass样式的支持的完整教程。
答案 0 :(得分：0)
我不确定您的文件和代码，但是我可以看到的一件事是您尝试安装css-loader和style-loader，但是我在您的{{1 }}文件。
检查它们是否正确安装
并用于安装css-loader。不要安装最新版本3.0.0。
代替尝试package.json
还
在您的rules.js文件中替换以下代码
npm i --save css-loader@2.1.1具有以下代码
{
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader']
}