Vue 구성 요소에서 SASS 사용 올바른 방법

Question

내 Vue 구성 요소에서 언어를 기본 CSS에서 명시 적으로 설정된 SCSS로 변경했습니다.

<style lang="scss"> 
    div.bordy{ border: solid 3px red; } 
</style> 

는 또한 this post by LinusBorg에 따라 webpack.config.js에게을 변경, 그래서는 다음과 같습니다.

module.exports = { 
    entry: ["babel-polyfill", "./index.js"], 
    output: { path: __dirname, filename: "bundle.js" }, 
    module: { 
    loaders: [ 
     { test: /\.js$/, loader: "babel", exclude: /node_modules/ }, 
     { test: /\.vue$/, loader: "vue" }, 
     // { test: /\.scss$/, loader: 'style!css!sass' }, 
     { test: /\.s[a|c]ss$/, loader: "style!css!sass" } 
    ] 
    }, 
    babel: { 
    presets: ["es2015", "stage-3"], 
    plugins: ["transform-runtime"] 
    }, 
    vue: { loaders: [{ scss: "style!css!sass" }] }, 
    resolve: { alias: { "vue$": "vue/dist/vue.common.js" } } 
} 

남자는 그렇게함으로써 SCSS를 잡아서 SASS에 매핑한다고 설명합니다. 그러나 다음과 같은 오류가 나타납니다.

Module not found: Error: Cannot resolve module 'scss-loader'

아래와 같은 패키지 설치를 시도했지만 출력 오류가 발생하지 않았습니다. 여기

npm install scss-loader --save-dev 

, 나는 불확실 얻고 난 못해 거의 문제를 해결하지 않는 화가 함성과 논평하지 가능한 모든 방향에서 힌트를 읽고 있어요 때문에 googlearching 더 혼란 날 리드.

함께 사용하려면 style lang="sass"을 사용해야합니까? 나는 그 때

, 나는 노드 말대꾸를 설치해야하고 내가 문제를 해결하거나 숨어있어 잘 모르겠어요 ...

Answer 1

당신은 sass-loader 및 node-sass를 설치해야하고 그것은이다 문제를 숨기지 않고 해결합니다.

sass-loaderdocumentation 분명히 말한다 : 그것은 package.json의에서 여기

The sass-loader requires node-sass and webpack as peerDependency. Thus you are able to specify the required versions accurately.

하고 peerdependency 있습니다 말대꾸 로더가 node-sass이 버전의 작업을 의미

"peerDependencies": { 
    "node-sass": "^3.4.2 || ^4.0.0", 
    ..... 

.

'use strict'; 

var utils = require('loader-utils'); 
var sass = require('node-sass'); 

당신이 그것을 설치 한 후에는 다음을 수행 할 수 있습니다 :

<style lang="scss"> 
or 
<style lang="sass"> 

말대꾸 로더 /하는 index.js -

그것은 그것의 아주 4th line에서 그것을 필요로 코드입니다

이 두 가지 모두에 대해 동일한 로더를 사용하기 때문입니다.