Grunt를 사용할 때 Bower 구성 요소에서 CSS 파일을 찾을 수 없습니다.

CSS 스타일 시트를 구성 요소의 .sass 파일로 가져 오려고합니다. 이 예에서, 구성 요소는 부트 스트랩-선택하고 가져 오기는 다음과 같습니다Grunt를 사용할 때 Bower 구성 요소에서 CSS 파일을 찾을 수 없습니다.

@import 'bootstrap-select/bootstrap-select.css'

이 성공적으로 빌드 있지만, 브라우저 나 브라우저에 다음과 같은 오류가 발생, 파일을 찾을 수 없습니다 :

GET http://localhost:9000/styles/bootstrap-select/bootstrap-select.css 404 (Not Found)

빌드에 .css 파일을 포함하도록 설정해야 할 특별한 것이 있습니까?

출처

2013-10-15 Dallas Clark

파일의 코드를 Sass 파일로 가져 오려면 가져온 파일의 끝이 .sass 또는 .scss이어야합니다. 파일이 .css으로 끝나면 코드는 빨려 들지 않고 HTTP 요청을 생성하는 일반 CSS @import 문입니다.

가져올 CSS 파일을 복사하고 그 파일의 길이를 .scss 및 @import으로 변경하십시오. 그러면 Sass는 코드를 빨아 들여 CSS 파일의 @import 문을 코드로 대체합니다.

출처

2013-10-15 09:56:57

제안 해 주셔서 감사 드리며, 임시 해결 방법으로 이미 수행했지만 bower 구성 요소를 사용하는 목적을 무효화했습니다. 이상적으로 수동 조작없이 bower 구성 요소를 설치 또는 업데이트하려고합니다. –

사실 그렇지만 @import를 통해 CSS 코드를 Sass로 가져올 수 없다는 것은 Bower를 통해 제공되는 Sass 버전의 bootstrap-select가 필요하다는 것을 의미합니다. 사용 가능한 Sass 버전이 없으면 Bower를 통해 해당 라이브러리를 관리 할 수 없습니다. –

카릴이 말한 바는 무엇입니까? 그러나 나는 당신이 포함 할 수 있거나 포함 할 수없는 것에 관해서 훨씬 더 많은 유연성을 제공하기 때문에 대신 bootstrap-sass을 사용할 것을 제안 할 것입니다. 저는 이것을 프로덕션에서 사용하고 있으며 매우 좋습니다. 변수를 포함하여 빌드를 완전히 조정하여 버튼 색상, 간격 및 기타 등을 조정할 수 있습니다. 예를 들어 :

/* 
|--------------------------------------------------------------------- 
| Only include the parts of Bootstrap that we are actually using. 
|--------------------------------------------------------------------- 
*/ 

$navbar-margin-bottom: 0; 

@import "../vendor/bootstrap-sass/lib/variables"; 
@import "../vendor/bootstrap-sass/lib/mixins"; 
@import "../vendor/bootstrap-sass/lib/normalize"; 
@import "../vendor/bootstrap-sass/lib/print"; 
@import "../vendor/bootstrap-sass/lib/scaffolding"; 
@import "../vendor/bootstrap-sass/lib/type"; 

// etc

그 대신 bower.json (bootstrap-sass) 및 사용에 추가합니다. 다음 구문을 허용 sass-css-importer라고 설명 된 기능을 허용 루비 보석 .scss 파일 내에서 .css로 끝나는 파일을 포함하는 데 사용할

출처

2013-10-15 20:07:28 Ben

귀하의 제안에 감사드립니다. 이미 sass-bootstrap을 사용하고 있지만 sass 준비가되지 않은 다른 bower 구성 요소 (예 : 부트 스트랩 선택)의 경우 솔루션이 수동으로 조정 된 것처럼 보입니다. –

죄송합니다, 선택이 twbs의 일부라고 생각했습니다. 내 잘못입니다. RE : 수동 조정; 예, 그렇습니다. 다른 사람에게 유익하다고 생각되는 소스 코드를 조정하는 경우 원본 저장소에 끌어 오기 요청을 제출하십시오. 그러면 SASS 버전의 구성 요소를 찾는 사람들에게 이익이되며, 향후 업데이트 될 경우 Bower 패키지 내에서 SASS를 사용할 수있게됩니다.다른 방법은'grunt-contrib-copy'와 같은 것을 사용하고 CSS의 확장자를 다른 디렉토리에 배치하는 것입니다. :) – Ben

이있어 :

@import "CSS:../../bower_components/alertify/themes/alertify.core"; 
@import "CSS:../../bower_components/alertify/themes/alertify.default"; 
@import "CSS:../../bower_components/normalize-css/normalize"; 
@import "../../../bower_components/bourbon/app/assets/stylesheets/_bourbon"; 
@import "../../../bower_components/neat/app/assets/stylesheets/_neat";

그것은이에 추가 할 수 있습니다 Gemfile과 같이하십시오 Gruntfile 필요

source "http://rubygems.org" 
gem "sass-css-importer"

그리고 :

sass: 
    options: 
    quiet: true 
    require: 'sass-css-importer' 
    static: 
    files: [ 
     expand: true 
     cwd: 'source/styles' 
     src: ['*.scss'] 
     dest: 'build/styles' 
     ext:

YMMV. 행운을 빕니다!

출처

2013-11-12 20:41:23

Grunt를 사용할 때 Bower 구성 요소에서 CSS 파일을 찾을 수 없습니다.

답변

관련 문제