Использование SASS в компонентах Vue правильным способом

Question

В моем компоненте Vue я изменил язык с CSS по умолчанию на явно установленный SCSS, например.

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

Я также изменил webpack.config.js согласно this post by LinusBorg, так это выглядит.

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 ясно говорит:

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

и вот peerdependency от его package.json:

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

Что означает дерзость-погрузчик будет работать с этими версиями node-sass.

Это требует в самом 4th line из его код - дерзость-погрузчик/index.js:

'use strict'; 

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

После того, как он установлен, вы можете сделать любое из следующих действий:

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

, поскольку вы собираетесь использовать один и тот же загрузчик для обоих.