Visual Studio 2015에서 .sass 파일을 저장하여 컴파일하는 방법

Visual Studio 2015에서 .sass 파일을 저장하여 컴파일하는 방법

Visual Studio 2015에서 완전한 sass(즉, scss) 프리컴파일러 환경을 실행하려면 어떻게 해야 합니까?이것은 더 적은 것에 대한 이것의 형제 질문입니다.

Visual Studio에서 길을 클릭하기만 하면 꿀꺽 삼키거나 으르렁거리지 않고도 이 기능을 수행할 수 있습니다.

웹 컴파일러 설치

1. Visual Studio에서 도구 -> 확장 및 업데이트를 누릅니다.
2. 웹 컴파일러(Mads Kristensen이 만든)를 검색하고 설치합니다.
3. Visual Studio를 다시 시작해야 합니다.

파일 컴파일

1. 컴파일을 설정하려면 Solution Explorer에서 .scss-file을 마우스 오른쪽 버튼으로 클릭합니다.
2. 웹 컴파일러 -> 컴파일 파일(Shift+Alt+Q)을 누릅니다.

컴파일러의 동작을 수정할 수 있는 프로젝트 루트에 compilerconfig.json이라는 파일이 생성됩니다.컴파일러 config.json 파일을 마우스 오른쪽 버튼으로 클릭하면 구성된 모든 컴파일러를 쉽게 실행할 수 있습니다.

Visual Studio에서 .scss 파일이 수정될 때마다 컴파일러가 자동으로 실행되어 컴파일된 출력 파일을 생성합니다.

빌드에서 컴파일

1. 컴파일러 config.json 파일을 마우스 오른쪽 버튼으로 클릭합니다.
2. 웹 컴파일러를 누릅니다. -> 빌드에서 컴파일 사용
3. 메뉴 항목을 클릭하면 프로젝트 자체에 파일을 추가하지 않고 패키지 폴더에 NuGet 패키지가 설치된다는 정보가 표시됩니다.NuGet 패키지에는 프로젝트 루트에 있는 컴파일러 config.json 파일에서 동일한 컴파일러를 실행하는 MSBuild 작업이 포함되어 있습니다.

Gulp + Visual Studio 2015를 사용하는 경우

1. 먼저 gulp-sass를 설치합니다. 이것이 패키지입니다.json 파일

{
      "name": "ASP.NET",
      "version": "0.0.0",
      "devDependencies": {
        "gulp": "3.8.11",
        "gulp-concat": "2.5.2",
        "gulp-cssmin": "0.1.7",
        "gulp-uglify": "1.2.0",
        "rimraf": "2.2.8",
        "gulp-sass": "2.2.0"
      }

2. 벌프 파일에.js.

   var sass = require("gulp-sass");
   var paths = {
     webroot: "./wwwroot/"
   }
   paths.scss = paths.webroot + "css/**/*.scss";
   gulp.task('sass', function() {
     gulp.src(paths.scss)
       .pipe(sass())
       .pipe(gulp.dest(paths.webroot + "css"));
   });
   gulp.task('watch-sass', function() {
     gulp.watch(paths.scss, ['sass']);
   })

3. 이제 "태스크러너 탐색기"를 열고 작업 "watch-sass"를 두 번 클릭합니다.

이제 당신이 scss를 저장할 때마다 css는 sas 파일을 컴파일하고 변경합니다.

VS2015용 웹 컴파일러 확장

꿀꺽꿀꺽 마셔야 합니다.npm 설치 - gulp

이게 도움이 되길...두서너 개의 굴렁쇠

편집:

웹 컴파일러가 문자열을 유니코드 문자로 변환하지 말았어야 할 때 문제가 발생했습니다.저는 VS2015에서 이 구현 http://blog.oxfordcc.co.uk/compiling-sass-gulp-visual-studio/ 으로 전환했고 CSS를 올바르게 컴파일하고 있습니다.다른 사용자가 동일한 문제에 직면할 경우를 위해 추가됩니다.

컴파일을 수동으로 설정하는 복잡한 작업을 수행하지 않으려면 다음과 같이 놀라울 정도로 간단한 확장 기능을 사용할 수 있습니다.

웹 컴파일러(FREE)

이미 언급되었지만 웹 필수 요소의 저자인 Mads Kristensen은 웹 컴파일러라는 독립형 컴파일 도구를 만들었습니다.당신이 해야 할 일은 그것을 설치한 다음 컴파일할 SAS 파일을 마우스 오른쪽 버튼으로 클릭하고 웹 컴파일러 > 컴파일 파일을 선택하는 것입니다.이때부터 감시되고 저장될 때마다 파일이 컴파일됩니다.

웹 컴파일러 다운로드

---

SASS 컴파일(FREE)

웹 컴파일러와 유사하게 이 확장자는 널리 사용되는 Web Essentials 확장자에서 컴파일이 제거되었기 때문에 VS2013 및 VS2015 모두에서 작동하도록 만들어진 독립 실행형 확장자입니다.이 제품은 가볍고 오류 보고 기능이 매우 뛰어납니다.여기에서 확장에 대한 저자의 블로그를 읽으십시오.

SAS 컴파일 다운로드

---

웹 워크벤치(무료/유료)

마인드스케이프의 웹 워크벤치는 SASS를 컴파일할 때 수년 동안 제가 가장 좋아하는 확장이었지만 그 이후로 무료 대안을 선호하기 위해 멀어졌습니다.여전히 Pro 버전은 출력된 파일을 사용자 지정할 수 있는 여러 가지 방법이 있는 강력한 도구이지만 무료 도구가 있다는 점을 고려하면 상당히 비싼 편입니다.

Web WorkBench 다운로드

이 질문에 대한 답변의 대부분의 단계는 같은 일을 더 적은 비용으로 수행하는 방법과 관련된 이 게시물에 'Maverick'이 제공한 단계와 동일합니다.하지만, 누군가가 내가 단순히 sass를 포함하도록 그 질문을 바꾸는 것을 허락하지 않았습니다. (아마도 그것이 최선이었을 것입니다, 저는 모릅니다.)따라서 다음 답변은 위의 게시물에서 매버릭이 지정한 단계에 의존하며, 이러한 차이점이 있습니다.

(빈 프로젝트의 사전 단계) 빈 프로젝트로 시작한 경우 먼저 그룬트 및 바우어를 추가합니다.

솔루션을 마우스 오른쪽 버튼으로 클릭 -> 추가 -> '프로젝트에 Grunt and Bower to Project' (그런 다음 모든 설치가 완료될 때까지 잠시 기다립니다)

꾸러미json:

"devDependencies": {
    "grunt": "^0.4.5",
    "grunt-bower-task": "^0.4.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-contrib-sass": "^0.9.2"
}

(FYI: grunt-contrib-sass 링크)

그러면:

종속성 -> NPM -> 패키지 복원을 마우스 오른쪽 버튼으로 클릭합니다.

gruntfile.js

다음 세 줄을 추가하거나 맨 아래에 등록합니다(NPM 작업).

grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-contrib-sass");

다시 gruntfile.js에서 다음과 같은 init 구성을 추가합니다.

주의사항:나는 그런 구성에 대해 전문가가 아닙니다.저는 얼마 전에 훌륭한 블로그 게시물에서 sas 구성을 발견했는데, 지금은 신용을 주기 위해 찾을 수 없습니다.핵심은 특정 폴더(및 하위 폴더) 내에서 프로젝트의 모든 파일을 찾고 싶다는 것이었습니다.다음은 이를 수행합니다(참고)."someSourceFolder/**/*.scss"중요한 관련 참고 사항을 참조하십시오.}

// ... after bower in grunt.initConfig ...
"default": {
    "files": [
        {
            "expand": true,
            "src": [ "someSourceFolder/**/*.scss" ],
            "dest": "wwwroot/coolbeans", // or "<%= src %>" for output to the same (source) folder
            "ext": ".css"
        }
    ]
},
"watch": {
    "sass": {
        "files": [ "someSourceFolder/**/*.scss" ],
        "tasks": [ "sass" ],
        "options": {
            "livereload": true
        }
    }
}

이제 다른 답변에 나와 있는 대로 작업 실행기 탐색기에 대한 지침을 따릅니다.프로젝트를 닫았다가 다시 여십시오.프로젝트가 시작될 때마다 'watch'('Tasks' 아래)를 실행(두 번 클릭)해야 시계를 시청할 수 있는 것처럼 보이지만, 이후 저장 시에도 작동합니다.

언급URL : https://stackoverflow.com/questions/30107925/how-to-compile-sass-files-on-save-in-visual-studio-2015