[英]Webpack Configuration Error: “Could not resolve the @import”
I have a very basic Webpack setup, but upon running npm run build
to bundle my modules, Webpack is giving me the following error: "Could not resolve the @import for ~bootstrap/scss/bootstrap.scss"
我有一个非常基本的Webpack设置,但是在运行
npm run build
来捆绑我的模块时,Webpack给我以下错误: "Could not resolve the @import for ~bootstrap/scss/bootstrap.scss"
I've installed Bootstrap's dependencies, including precss
, autoprefixer
, postcss-loader
, jquery
, and popper.js
. 我已经安装了Bootstrap的依赖项,包括
precss
, autoprefixer
, postcss-loader
, jquery
和popper.js
。 Then I imported Bootstrap into my SCSS file. 然后,我将Bootstrap导入到我的SCSS文件中。
main.css: main.css:
@import "~bootstrap/scss/bootstrap.scss";
webpack.config.js: webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const autoprefixer = require('autoprefixer');
const precss = require('precss');
module.exports = {
mode: 'development',
entry: {
app: './src/index.js',
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
publicPath: '/',
hot: true
},
module: {
rules: [
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
precss,
autoprefixer
];
}
}
}]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/main.html'
})
],
output: {
filename: 'js/[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
}
};
package.json: package.json:
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"csv-loader": "^3.0.2",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.12.0",
"papaparse": "^5.0.1",
"postcss-loader": "^3.0.0",
"precss": "^4.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^1.0.0",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
},
"dependencies": {
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
"lodash": "^4.17.15",
"popper.js": "^1.15.0",
"vue": "^2.6.10"
}
What could I be missing? 我可能会缺少什么?
For future readers, this was a syntax issue in my webpack.config.js
file. 对于以后的读者来说,这是我的
webpack.config.js
文件中的一个语法问题。 I wasn't prefacing my loaders with loader:
. 我没有在
loader:
前面加上loader:
:。 After I did that, I was able to run npm run build
and npm start
perfectly fine. 完成之后,我可以运行
npm run build
和npm start
。
Instead of: 代替:
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
precss,
autoprefixer
];
}
}
}]
}
I needed this: 我需要这个:
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
require('precss'),
require('autoprefixer')
];
}
}
},
{
loader: 'sass-loader'
}
]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.