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"と一緒に使うべきですか？

私はノード-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です：SASS-ローダはnode-sassのこれらのバージョンで動作することを意味し

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

。

それは、コードのITの非常に4th lineでそれを必要とする - SASS-ローダ/ index.js：あなたはそれがインストールされていたら、次のいずれかの操作を行うことができ

'use strict'; 

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

：

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

これらの両方に同じローダを使用する予定です。