Question

我按照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";

Answer 1

当Sass由其自己的CLI预编译时，它会自行处理@imports，因此有时不理解~符号。因此，您可以先导入"node_modules/bootstrap/scss/bootstrap";并替换~ 改为使用node_modules/表示法。

Answer 2

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

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

然后有效

Answer 3

我没有使用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文件中

Answer 4

我在使用Solidus时，在使bootstrap与solidus一起工作时，最初遇到了同样的问题。
下面的内容对我有用，因为我们必须显示bootsrap所在的完整路径。

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

Answer 5

当您从基本根style.scss以外的任何scss文件中的node_modules导入时，会发生这种情况。尝试将其放在根style.scss中，它应该这样做。

Answer 6

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

打开尝试导入的scss文件。
从不同的空间整理可能要尝试的导入地址。

Answer 7

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

删除 node_modules
npm 安装
服务

作品;)

Answer 8

我只是运行 npm i bootstrap 并且它起作用了。

错误：要导入的文件未找到或不可读：~bootstrap / scss / bootstrap

8 个答案: