Javascript 从React ES6导入时,Webpack3 CSS/LESS不起作用
我正在用Webpack来识别CSS/LESS文件,但没有成功 这是我的网页文件:Javascript 从React ES6导入时,Webpack3 CSS/LESS不起作用,javascript,reactjs,webpack,ecmascript-6,Javascript,Reactjs,Webpack,Ecmascript 6,我正在用Webpack来识别CSS/LESS文件,但没有成功 这是我的网页文件: const path = require("path"); const HtmlWebPackPlugin = require("html-webpack-plugin"); const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: ["./src/App.js"], o
const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: ["./src/App.js"],
output: {
path: path.resolve(__dirname, "dist"),
filename: "app.bundle.js"
},
module: {
rules: [
{
test: /\.css$/i,
use: ExtractTextPlugin.extract({
use: ['style-loader', 'css-loader'] //, 'less-loader']
})
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
],
},
]
},
plugins: [
new ExtractTextPlugin('app.bundle.css'),
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html",
inject: "body"
}),
],
devServer: {
contentBase: "./dist",
filename: "app.bundle.js",
publicPath: "/",
stats: {
colors: true
}
},
};
当我尝试从React文件导入它时,我得到以下结果:
import styles from 'styles/index.css';
错误:
ERROR in ./src/App.js
Module not found: Error: Can't resolve 'styles/index.css' in '/code/customers/project/map/src'
@ ./src/App.js 15:13-40
@ multi ./src/App.js
档案清楚地存在。知道为什么webpack拒绝包含该文件吗
谢谢 您需要以
/
作为前缀,否则它将查找名为样式的npm模块
import styles from './styles/index.css';?
您需要使用/
作为前缀,否则它将查找名为样式的npm模块
import styles from './styles/index.css';?