Error: File to import not found or unreadable: ~bootstrap/scss/bootstrap

Question

I followed the instructions at getbootstrap.com thinking that everything would just work. It isn't so far :\

Everything seems to be fine until I try to load the page, at which point my Express.js app throws the error

    [[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.

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...

 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

...
"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')
  ]
};

and inside app.scss I have

@import "custom";
@import "~bootstrap/scss/bootstrap";

Solution 1

When Sass is precompiled by its own CLI, it processes @imports by 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.

Solution 2

I had a similar error

File to import not found or unreadable: 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.

Solution 3

For me, I had to change the way I was importing

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

Then it works

Solution 4

I am not using webpack, but I got the same error when I try to import bootstrap in my scss file like this:

@import 'bootstrap';

It would work if I just import it like this in my case:

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

But since That is not clean enough to my liking, I found out I could alter my gulp scss task from:

.pipe(plugins.sass())

to:

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

(notice the includePaths section) and now I can just use

@import 'bootstrap';

In my scss file

Solution 5

I am using Solidus and on the very first while getting bootstrap works with the solidus faced the same issue.
The below thing works for me as we have to show the full path where the bootsrap is.

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

View more solutions