错误：找不到要导入的文件或无法读取：~bootstrap/scss/bootstrap

Posted 2023-03-07

【中文标题】错误：找不到要导入的文件或无法读取：~bootstrap/scss/bootstrap

【英文标题】：Error: File to import not found or unreadable: ~bootstrap/scss/bootstrap

【发布时间】：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、***（是的，我知道有很多类似的问题，但没有一个回答我的问题）、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。谢谢！

【参考方案1】：

当您在除基本根 style.scss 之外的任何 scss 文件中从 node_modules 进行导入时，就会发生这种情况。试试把它放在根style.scss，应该可以的。

【讨论】：

我只有一个scss文件。

【参考方案2】：

当 Sass 被自己的 CLI 预编译时，它自己处理 @imports，因此有时不理解 ~ 表示法。因此，您可以首先导入 "node_modules/bootstrap/scss/bootstrap"; 并替换 ~ 用node_modules/ 代替。

【讨论】：

谢谢，我得到了这个工作，但我不得不返回几个目录。：@import '../../node_modules/bootstrap/scss/bootstrap';

你是说scss/functions目录不需要存在？

【参考方案3】：

我遇到了类似的错误

找不到或无法读取要导入的文件： node_modules/bootstrap-sass/assets/stylesheets/bootstrap

只需将“bootstrap-sass”：“^3.3.7”添加到您的 package.json 中的 devDependencies，然后在您的项目目录中运行 npm update、npm install。

【讨论】：

这适用于我添加“bootstrap-scss”和@import“~bootstrap-scss/bootstrap”；

未来读者：注意在bootstrap、bootstrap-sass 和bootstrap-scss 中选择正确的包。对于问题中描述的错误，将 bootstrap 作为依赖项应该可以工作。

【参考方案4】：

如果您有任何问题并且无法解决，请尝试以下操作：

打开您尝试导入的 scss 文件。

纠正它可能尝试从不同空间导入的地址。

【参考方案5】：

对我来说，我必须改变我的导入方式

@import '../../../node_modules/bootstrap/scss/bootstrap';

然后就可以了

【讨论】：

这行得通，谢谢。奇怪的是，当我最初设置它时它正在工作，我打赌我离开它过夜然后回来它就停止了。

【参考方案6】：

我没有使用 webpack，但是当我尝试像这样在我的 scss 文件中导入引导程序时遇到了同样的错误：

@import 'bootstrap';

如果我在我的情况下像这样导入它会起作用：

@import "../../../../../bootstrap/scss/bootstrap";

但由于那不够干净，我不喜欢，我发现我可以从以下位置更改我的 gulp scss 任务：

.pipe(plugins.sass())

到：

.pipe(plugins.sass(
    outputStyle: 'nested',
    precision: 3,
    errLogToConsole: true,
    includePaths: ['node_modules/bootstrap/scss']
))

（注意 includePaths 部分）现在我可以使用了

@import 'bootstrap';

在我的 scss 文件中

【讨论】：

我在这里稍微阐述一下 2020 年的方法：***.com/a/65239936/2223106

【参考方案7】：

我正在使用 Solidus，并且在开始使用 Solidus 进行引导工作时，我遇到了同样的问题。 下面的东西对我有用，因为我们必须显示引导程序所在的完整路径。

@import "../../../../../node_modules/bootstrap/scss/bootstrap";

【参考方案8】：

我通过以下方式解决了问题：

删除节点模块 npm 安装 ng 服务

有效；）

【参考方案9】：

我刚刚运行 npm i bootstrap 并且它成功了。

【参考方案10】：

我遇到了类似的问题，最终对我的修复非常基本。

我只需将"../node_modules/bootstrap/scss/bootstrap"; 更改为"node_modules/bootstrap/scss/bootstrap";。

【参考方案11】：

在 Rails 7.0.1 中，使用rails new myapp --css=bootstrap 安装后，出现同样的错误。问题已通过以下方式解决：

将application.erb 中的stylesheet_link_tag 替换为：stylesheet_link_tag "application.bootstrap", "data-turbo-track": "reload" 将app/assets/stylesheets/application.scss 重命名为app/assets/stylesheets/application.bootstrap.scss 将内容替换为@import '../../../node_modules/bootstrap/scss/bootstrap';