Невозможно загрузить загрузочный лоток с помощью Node-sass, bootstrap-sass

Question

Я нахожусь в старом/новом проекте, основанном на узле/выражении, где источник вставки был больно скопирован (и взломан). Я хочу использовать пакет bootstrap для большей поддержки. Но, после добавления самозагрузки-дерзость и узел-дерзость, я сталкиваюсь эту ошибку:

Вот ошибка

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"; 

Я новичок в узле, исходя из Rails, где настройка бутстрапа с sass была очень простой. Дайте мне знать, если вам нужны дополнительные файлы/информация о проекте.

Благодарим за помощь!

Answer 1

У меня была аналогичная проблема при импорте bootstrap-sass в проект React/Webpack, но решение такое же. В основном файле scss (theme.scss) вам нужно @import отдельных микшинов через относительные пути внутри пакета node_modules минус сегмент пути node_modules.

Если вы тянете отдельные функции, вам необходимо изменить путь @import "bootstrap/feature", чтобы отразить путь каждой функции, которую вы хотите использовать в пакете bootstrap-sass. Также обратите внимание на предыдущий ~ в пути, который разрешает ошибку для навигации по файлам SCSS.

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

Другой Гоча, если вы тянете в glyphicons вы будете нуждаться, чтобы установить $icon-font-path, чтобы указать папку шрифтов в пакете, либо сервер выдаст ошибку для поиска этих файлов.

$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"; 

Answer 2

У меня была аналогичная проблема при импорте бутстрап-сасса в угловом и глотком-сасе. в моем проекте проблемы с решимостью

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