Javascript 错误：未找到或无法读取要导入的文件：~bootstrap/scss/bootstrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48434762/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Error: File to import not found or unreadable: ~bootstrap/scss/bootstrap
提问by quarterpi
I followed the instructions at getbootstrap.comthinking that everything would just work. It isn't so far :\
我按照getbootstrap.com 上的说明进行操作，认为一切都会正常工作。还不是很远：\
Everything seems to be fine until I try to load the page, at which point my Express.js app throws the error
一切似乎都很好，直到我尝试加载页面，此时我的 Express.js 应用程序抛出错误
[[sass] error: File to import not found or unreadable: ~bootstrap/scss/bootstrap.
Parent style sheet: .../sass/app.scss at options.error (.../node-sass/lib/index.js:291:26)
I have tried npm install, restarting my server, looking on Google, StackOverflow (yes, I know there are quite a few similar questions, but none of them answer my question), the Bootstrap 4 GitHub issue pages and so far I haven't been able to come up with the answer.
我已经尝试过 npm install、重新启动我的服务器、在 Google、StackOverflow 上查找（是的，我知道有很多类似的问题，但没有一个回答我的问题）、Bootstrap 4 GitHub 问题页面，到目前为止我还没有能够想出答案。
Could it be that I installed the dependencies in the wrong place? (Dev instead of production or vis-à-vis)
可能是我在错误的地方安装了依赖项？（开发而不是生产或相对）
Why am I getting this error??
为什么我收到这个错误？？
My webpack.config.js file looks like this...
我的 webpack.config.js 文件看起来像这样......
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/public',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translate CSS into CommonJS modules
}, {
loader: 'postcss-loader', // run post CSS actions
options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compile Sass to CSS
}]
}
]
}
};
My package.json file
我的 package.json 文件
...
"scripts": {
"start": "nodemon --exec babel-node server.js --ignore public/",
"dev": "webpack -wd",
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"axios": "^0.17.1",
"bootstrap": "^4.0.0",
"ejs": "^2.5.7",
"express": "^4.16.2",
"jquery": "^3.3.1",
"mongoose": "^5.0.0",
"node-sass-middleware": "^0.11.0",
"popper.js": "^1.12.9",
"precss": "^3.1.0",
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"autoprefixer": "^7.2.5",
"babel-cli": "^6.26.0",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.9",
"eslint": "^4.15.0",
"eslint-plugin-react": "^7.5.1",
"node-sass": "^4.7.2",
"nodemon": "^1.14.11",
"postcss-loader": "^2.0.10",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.1",
"webpack": "^3.10.0"
}
}
postcss.config.js
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
};
and inside app.scss I have
在 app.scss 里面我有
@import "custom";
@import "~bootstrap/scss/bootstrap";
回答by Ram Chandra Neupane
When Sass is precompiled by its own CLI, it processes @importsby itself, and sometimes thus doesn't understand ~notation. So you can import "node_modules/bootstrap/scss/bootstrap";in first place and replaced the ~notation with node_modules/instead.
当 Sass 由它自己的 CLI 预编译时，它会自行处理@imports，因此有时无法理解~符号。所以你可以"node_modules/bootstrap/scss/bootstrap";首先导入并~用node_modules/代替替换符号。
回答by Max Sherbakov
I had a similar error
我有一个类似的错误
File to import not found or unreadable: node_modules/bootstrap-sass/assets/stylesheets/bootstrap
要导入的文件未找到或无法读取：node_modules/bootstrap-sass/assets/stylesheets/bootstrap
Just add "bootstrap-sass": "^3.3.7", to devDependencies at yours package.json, ad run npm update, npm install in your project directory.
只需将“bootstrap-sass”：“^3.3.7”添加到您的 package.json 中的 devDependencies，并在您的项目目录中运行 npm update，npm install。
回答by imshashi17
If you are having any issue and the answers fail to resolve try this:
如果您遇到任何问题并且答案无法解决，请尝试以下操作：
Open up your scss file that tries to import.
Rectify the address of the import it might be trying from differnt space.
打开您尝试导入的 scss 文件。
纠正它可能从不同空间尝试的导入地址。
回答by deepak thomas
This happens when you give import from node_modules in any scss file other than the base root style.scss. Try placing it in the root style.scss, it should do it.
当您在除基本 root 之外的任何 scss 文件中从 node_modules 提供 import 时，就会发生这种情况style.scss。尝试将它放在 root 中style.scss，它应该可以。
