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

44

我按照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”。 - Ram Chandra Neupane
@DayOne 我猜你指的是app.scss中的@import。有什么原因会导致这样的区别吗?这两个@import行是文件中的前两行,并且它们按照https://getbootstrap.com/docs/4.0/getting-started/webpack/中的文档所示出现。 - quarterpi
3
如果我理解正确的话,当Sass使用自己的CLI进行预编译时,它会自行处理 @import,因此无法理解 ~ 符号。因此,您可以在第一位置导入 @import "bootstrap/scss/bootstrap"; 或者用 node_modules/ 替换 ~ 符号,也许这样可以起作用。 - Ram Chandra Neupane
@DayOne 好的,我会试一下。谢谢你的建议。 - quarterpi
@DayOne,很抱歉这么晚才回复你,但是"node_modules/bootstrap/scss/bootstrap";解决了问题;而"bootstrap/scss/bootstrap";则没有。请回复“Answer”以便我给你点赞。我仍然不明白为什么node_modules/...可以工作,而bootstrap/...不能?无论如何,+1。谢谢! - quarterpi
12个回答

0

这种情况发生在你在任何不是基本根目录下的scss文件中导入node_modules时。尝试将其放置在根目录下的style.scss中,应该可以解决问题。


我只有一个scss文件。 - quarterpi

-1

这与我的问题类似,npx mix 导入 bootstrap 失败并出现以下错误:

SassError: 找不到要导入的样式表。

原来我的应用程序根文件夹名称使用了 "#",导致 npx 将其视为异常路径并无法导入。

npx mix error

解决方案:

  • 重命名文件夹(删除“#”)
  • 问题解决

希望这可以帮助到您。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接