我正在使用 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 拒绝包含该文件吗?
谢谢!
最佳答案
您需要以 ./
为前缀,否则它将寻找名为 styles
的 npm 模块。
import styles from './styles/index.css';?
关于javascript - 从 React ES6 导入时,Webpack3 CSS/LESS 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47899719/