【发布时间】：2018-07-04 05:21:34
【问题描述】：
我按照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', // 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
}]
}
]
}
};
我的 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";
【问题讨论】：
-
尝试先导入“bootstrap/scss/bootstrap”。
-
@DayOne 我假设您指的是 app.scss 中的
@import。有什么理由会有所作为吗？两行@import是文件中的前两行，它们的显示方式如getbootstrap.com/docs/4.0/getting-started/webpack 中的文档所示 -
如果我理解正确的话，当 Sass 被自己的 CLI 预编译时，它自己处理
@imports，因此不理解~表示法。因此，您可以首先导入@import "bootstrap/scss/bootstrap";，或者将~符号替换为node_modules/，而不是它可能会起作用。 -
@DayOne 好的，我会试试看。感谢您的洞察力。
-
@DayOne，很抱歉我花了这么长时间才回复你，但
"node_modules/bootstrap/scss/bootstrap";成功了；"bootstrap/scss/bootstrap";没有。请“回答”，这样我就可以给你信用。我仍然不明白为什么node_modules/...工作但bootstrap/...没有？无论如何，+1。谢谢！
标签： javascript node.js twitter-bootstrap express webpack