Express가 포함 된 SASS의 Automagic 컴파일

Question

저는 Express와 다양한 다른 노드 관련 프레임 워크에 익숙해 져 있습니다. ASP MVC 세계보다 흥미롭고 가볍습니다. 그리고 제가하려는 일 중 하나입니다. 자동으로 CSS 파일로 컴파일되는 SASS 파일을 가져옵니다.

몇 가지 방법을 통해 node-sass을 설치하고 튜토리얼을 따라했지만 원하는 결과를 얻지 못했습니다. 우선, 여기 내 디렉토리 구조가 있습니다.

app.js 
    static/ 
     stylesheets/ 
     images/ 
     js/ 
    sass/ 
     index.sass 
    views/ 
     index.jade 

그래서 내 계획은 매우 간단하다 : 나는 브라우저에서 views/index.jade를 방문 할 때, 나는 static/stylesheets/index.css 렌더링하는 index.jade을 원 - 분명,이 컴파일시에 존재하지 않지만, 우리는 sass의 내부 index.scss 파일을 해당 한 .

내 설정은 현재 /css/index.css이며 __dirname/static/stylesheets을 참조합니다. 그래서, 내 옥보기의 내부에, 나는 다음과 같은 블록이 있습니다

block head 
    link(href='/css/index.css', rel='stylesheet') 

의도는이 링크가 컴파일 된 말대꾸 파일을 참조하는 것입니다.

// Enable SASS compilation 
app.use(sass.middleware({ 
    src: __dirname + '/sass', 
    dest: __dirname + '/static/stylesheets', 
    debug: true, 
    outputStyle: 'compressed' 
})); 

// Add static content 
app.use('/js', express.static(__dirname + '/static/js')); 
app.use('/img', express.static(__dirname + '/static/img')); 
app.use('/css', express.static(__dirname + '/static/stylesheets')); 

내 문제가 발생 실제로을 무엇 SASS는 CSS를 잘 컴파일로 나타나는 것을이지만, 모든 것을 붙이는 것 : 여기 app.js 말대꾸의 compilaton 관련된 및 정적 콘텐츠 제공의 일부입니다 위에 사용 된 /css 경로 때문에 /css/ 폴더 (존재하지 않음)에 저장하십시오. 아마 디버그 출력은 더 이해하게됩니다 :

source : E:\project\sass\css\index.scss 
dest : E:\project\static\stylesheets\css\index.css 
read : E:\project\static\stylesheets\css\index.css 

분명히, 이것은 의도되지 않습니다, 브라우저는 우리가 css/index.css 요구하고 있지만, SASS 파일이 css/css/index.css, 효율적으로 컴파일되고 생각하는 404ing 끝납니다.

여기서 어떻게해야합니까? 나는 눈부신 실수를하고 있다고 가정하지만 노드/익스프레션을 처음 접했을 때 나는 그것을 볼 수 없다.

Answer 1

내 sass 파일의 확장자를 scss로 변경하여이 문제를 해결했습니다. 그것이 유일한 문제였습니다. | : 패키지 이름이 node-sass이라면 약간 성가시다.