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

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

---

Visual Studio 2015에서 전체 sass (예 : scss) 프리 컴파일러 환경을 설정하고 실행하려면 어떻게해야합니까? 이것은 덜에 관한이 질문의 형제 질문 입니다.

---

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

1. 먼저 gulp-sass를 설치하십시오. 이것은 package.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. gulpfile.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. 이제 "Task Runner Explorer"를 열고 "watch-sass"작업을 두 번 클릭합니다.

이제 scss를 저장할 때마다 css가 sass 파일을 컴파일하고 변경합니다.

---

Visual Studio에서 간단하게 클릭하여 꿀꺽 꿀꺽 꿀꺽 거리지 않고 달성 할 수도 있습니다.

웹 컴파일러 설치

1. Visual Studio에서 도구-> 확장 및 업데이트를 누릅니다.
2. Web Compiler (Mads Kristensen에서 생성)를 검색하고 설치합니다.
3. Visual Studio를 다시 시작해야합니다.

파일 컴파일

1. 솔루션 탐색기에서 .scss 파일을 마우스 오른쪽 단추로 클릭하여 컴파일을 설정합니다.
2. 웹 컴파일러-> 파일 컴파일 (Shift + Alt + Q)을 누릅니다.

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

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

빌드시 컴파일

1. compilerconfig.json 파일을 마우스 오른쪽 단추로 클릭하십시오.
2. 웹 컴파일러-> 빌드시 컴파일 활성화를 누릅니다.
3. 메뉴 항목을 클릭하면 프로젝트 자체에 파일을 추가하지 않고 NuGet 패키지가 패키지 폴더에 설치된다는 정보가 표시됩니다. NuGet 패키지에는 프로젝트 루트의 compilerconfig.json 파일에서 똑같은 컴파일러를 실행하는 MSBuild 작업이 포함되어 있습니다.

---

VS2015 용 웹 컴파일러 확장

Gulp가 필요합니다. npm install -g gulp

이것이 도움이 되었기를 바랍니다 ... 몇 가지 덜 후프.

편집하다:

웹 컴파일러에서 문자열을 유니 코드 문자로 변환하지 않아야 할 때 문제가 발생했습니다. VS2015에서 http://blog.oxfordcc.co.uk/compiling-sass-gulp-visual-studio/ 구현으로 전환 했으며 CSS를 올바르게 컴파일하고 있습니다. 다른 사람이 같은 문제를 겪을 경우를 대비하여 추가되었습니다.

---

If you don't want to mess around with the intricacies of setting up the compilation manually, there are a number of amazingly simple extensions available that can handle this for you:

WebCompiler (FREE)

It's been mentioned already but Mads Kristensen (the author of web essentials) has created a standalone compilation tool called Web Compiler. All you have to do is install it, then right click on any of the SASS files you want to compile and select Web Compiler > Compile File. From that point on it is watched and anytime it is saved, the file will be compiled.

Download Web Compiler

---

CompileSASS (FREE)

Similar to Web Compiler this is a standalone extension that was created to work in both VS2013 and VS2015 because compilation was removed from the popular Web Essentials extension. It's lightweight and does the job very well with great error reporting. Read the author's blog about the extension here.

Download Compile SASS

---

Web Workbench (FREE/PAID)

Mindscape's Web Workbench was my favourite extension for many years when compiling SASS but I have since moved away in favour of the free alternatives. Still, the Pro version is a powerful tool with many ways to customise the outputted files but it is also quite expensive ($39) considering there are free tools out there.

Download Web WorkBench

---

Most of the steps in answer to this question are identical to the steps that were given by 'Maverick' on this post that concerned how to do the same thing for less. However, someone did not allow me to alter that question to simply include sass (which maybe was best, I don't know). So the following answer relies on the steps specified by Maverick in that post above, with these differences:

(Pre-step for Empty Projects) If you started with an empty project, first add Grunt and Bower:

Right click solution -> Add -> 'Grunt and Bower to Project' (then wait for a minute for it to all install)

package.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 link)

Then:

Dependencies -> right-click NPM -> Restore Packages.

gruntfile.js

1) Add or make sure these three lines are registered near the bottom (as NPM tasks):

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

2) Again in gruntfile.js, add init configurations, something like the following.

{ Caveat: I am no expert on such configurations. I found the sass configuration on an excellent blog post some time ago that I can't locate at this time in order to give credit. The key was I wanted to find all files in the project within a certain folder (plus descendants). The following does that (notice "someSourceFolder/**/*.scss", and see important related note here). }

// ... 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
        }
    }
}

이제 다른 답변에 제공된 Task Runner Explorer의 지침을 따르십시오. 프로젝트를 닫았다가 다시여십시오. 프로젝트가 시계를보기 위해 시작될 때마다 'watch'( 'Tasks'아래)를 실행 (더블 클릭)해야하는 것 같지만, 이후 저장시 작동합니다.

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