我正在与Webpack斗争,以识别CSS / LESS文件,但没有取得多大成功。
这是我的Webpack文件:
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拒绝包含文件吗?
谢谢!
答案 0 :(得分:4)
您需要以./
作为前缀,否则它会寻找名为styles
的npm模块。
import styles from './styles/index.css';?