Css 无法使用节点sass加载引导，引导sass

我在一个基于node/express的旧/新项目中，boostrap源代码被痛苦地复制粘贴（并被黑客攻击）。 我想使用bootstrap软件包来提高可维护性。但是，在添加引导SAS和节点SAS后，我面临以下错误：

这是错误

in /vagrant/sass/theme.scss:28:1
Error: File to import not found or unreadable: bootstrap/variables
Parent style sheet: /vagrant/sass/theme.scss
    at options.error (/vagrant/node_modules/node-sass/lib/index.js:277:32)
  source: /vagrant/sass/vendor/bootstrap-datepicker/css/bootstrap-datepicker3.min.scss
  dest: /vagrant/public/css/vendor/bootstrap-datepicker/css/bootstrap-datepicker3.min.css
  read: /vagrant/public/css/vendor/bootstrap-datepicker/css/bootstrap-datepicker3.min.css
  source: /vagrant/sass/theme.scss
  dest: /vagrant/public/css/theme.css
  read: /vagrant/public/css/theme.css
  error: File to import not found or unreadable: bootstrap/variables
Parent style sheet: /vagrant/sass/theme.scss

in /vagrant/sass/theme.scss:28:1
Error: File to import not found or unreadable: bootstrap/variables
Parent style sheet: /vagrant/sass/theme.scss
    at options.error (/vagrant/node_modules/node-sass/lib/index.js:277:32)

server.js

app.use(
  sass({
    src: __dirname + '/sass',
    dest: __dirname + '/public/css',
    prefix: '/css',
    // outputStyle: 'compressed',
    debug: true,
  })
);

package.json：

"dependencies": {
  "bcrypt-nodejs": "0.0.3",
  "body-parser": "^1.13.1",
  "bootstrap-sass": "^3.3.6",
  "connect-flash": "^0.1.1",
  "cookie-parser": "^1.3.5",
  "express": "^4.12.4",
  "express-session": "^1.11.3",
  "mysql": "^2.7.0",
  "node-sass": "^3.4.2",
  "node-sass-middleware": "^0.9.7",
  "passport": "^0.2.2",
  "passport-facebook": "^2.0.0",
  "passport-google-oauth": "^0.2.0",
  "passport-local": "^1.0.0",
  "passport-twitter": "^1.0.3",
  "randomstring": "^1.1.3",
  "sendgrid": "^1.9.2",
  "sequelize": "^3.9.0",
  "sequelize-fixtures": "^0.4.8",
  "shelljs": "^0.5.3",
  "swig": "^1.4.2"
},
"devDependencies": {
  "eslint": "^1.10.3",
  "gulp": "^3.9.0",
  "gulp-zip": "^3.0.2",
  "jake": "^8.0.12",
  "minimist": "^1.2.0",
  "node-sass": "^3.3.3",
  "node-sass-middleware": "^0.9.6"
}

theme.scss

/*!
 * Bootstrap v3.3.6 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
@import "bootstrap/glyphicons";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/dropdowns";
@import "bootstrap/button-groups";
@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
@import "bootstrap/jumbotron";
@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
@import "bootstrap/progress-bars";
@import "bootstrap/media";
@import "bootstrap/list-group";
@import "bootstrap/panels";
@import "bootstrap/responsive-embed";
@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
@import "bootstrap/popovers";
@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

我是node的新手，来自Rails，在那里用sass设置引导非常简单。如果您需要有关该项目的其他文件/信息，请告诉我

---

谢谢你的帮助

我在将

引导sass

导入React/Webpack项目时遇到类似问题，但解决方案是相同的。在主scss文件（theme.scss）中，您需要@import-individual-mixin，通过node_-modules包中的相对路径减去

node_-modules

路径段

如果要提取单个功能，则需要更改

@import“bootstrap/feature”

路径，以反映要在bootstrap sass包中使用的每个功能的路径。还要注意路径中前面的

~

，它解决了导航到SCSS文件时出现的错误

@import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";

另一个问题是，如果您正在拉入glyphicons，则需要将

$icon font path

设置为指向软件包中的fonts文件夹，否则服务器将在查找这些文件时出错

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "bootstrap-sass/assets/stylesheets/bootstrap/glyphicons";

如果您只想使用软件包中的所有内容，只需设置图标字体路径，并在theme.scss文件中输入所有样式

// Bootstrap
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";

---

在角形和吞咽式sass中导入引导式sass时，我遇到了类似的问题。在我的项目中解决问题

"./node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables"

---

用节点模块路径替换“引导”时有效。./node_modules/bootstrap sass/assets/stylesheets/_bootstrap”。但我不确定这是不是一个好办法。你能给我确认一下吗？很好用！谢谢！必须在react项目中使用此选项，fwiw:

$icon字体路径：“~bootstrap sass/assets/fonts/bootstrap/”@导入“./node_modules/bootstrap sass/assets/stylesheets/_bootstrap.scss”这似乎不再有效，使用引导-sass@3.3.7和节点-sass@4.5.3. 
~
显然被视为常规文件名字符。