错误:无法找到或无法读取导入的文件:~bootstrap/scss/bootstrap
错误:无法找到或无法读取导入的文件:~bootstrap/scss/bootstrap
我按照 getbootstrap.com 上的说明进行操作,认为一切都会正常工作。然而事实并非如此 :\
直到尝试加载页面时,一切都还好,此时我的 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)
我尝试了 npm install,重启服务器,查找 Google、StackOverflow(是的,我知道有很多类似的问题,但它们没有解答我的问题),以及 Bootstrap 4 GitHub 的问题页,但我仍然无法找到答案。
可能是我将依赖项安装在了错误的位置吗?(开发环境而不是生产环境,反之亦然)
为什么会出现这个错误?
我的 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', // 将 CSS 注入页面 }, { loader: 'css-loader', // 将 CSS 转换为 CommonJS 模块 }, { loader: 'postcss-loader', // 运行 post CSS 操作 options: { plugins: function () { // postcss 插件,可以导出到 postcss.config.js return [ require('precss'), require('autoprefixer') ]; } } }, { loader: 'sass-loader' // 将 Sass 编译为 CSS }] } ] } };
我的 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
module.exports = { plugins: [ require('autoprefixer') ] };
在 app.scss 中我有
@import "custom"; @import "~bootstrap/scss/bootstrap";