Sass innerhalb der Vue-Datei wird nicht kompiliert

Question

Ich bekomme einen Fehler beim Kompilieren der Sass über npm dev watch oder npm dev run.

npm ERR! Darwin 16.5.0 
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "development" 
npm ERR! node v6.9.5 
npm ERR! npm v3.10.10 
npm ERR! code ELIFECYCLE 
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js` 
npm ERR! Exit status 2 
npm ERR! 
npm ERR! Failed at the @ development script 'cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'. 
npm ERR! Make sure you have the latest version of node.js and npm installed. 
npm ERR! If you do, this is most likely a problem with the package, 
npm ERR! not with npm itself. 
npm ERR! Tell the author that this fails on your system: 
npm ERR!  cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js 
npm ERR! You can get information on how to open an issue for this project with: 
npm ERR!  npm bugs 
npm ERR! Or if that isn't available, you can get their info via: 
npm ERR!  npm owner ls 
npm ERR! There is likely additional logging output above. 
npm ERR! Please include the following file with any support request: 
npm ERR!  /Users/mike/code/chatroom/npm-debug.log 

Es ist die sass ich in der Chat.vue Datei schreibe das ist das Problem. Ich bin nicht so erfahren mit Front-End-Tools wie Npm, also weiß ich nicht wirklich, was ich versuchen soll. Ich habe versucht, npm install sass-loader node-sass webpack --save-dev wie hier angewiesen (https://github.com/vuejs/vue-loader/issues/363) ausgeführt, aber es hat keinen Unterschied gemacht.

Der tatsächliche Inhalt der Datei ist irrelevant, da es mit fast jedem Stilinhalt in der .vue-Datei passiert.

<style lang="scss"> 
    .chat { 
     background-color: #fff; 
     border: 1px solid #D3E0E9; 
     border-radius: 3px; 

     &__form { 
      border-top: 1px solid #D3E0E9; 
      padding: 10px; 

      &-input { 
       width: 
       border: 1px solid #D3E0E9; 
       padding: 5px 10px; 
       outline: none; 
      } 

      &-helptext { 
       color: #aaa; 
      } 
     } 
    } 
</style> 

NPM Version 3.10.10 Node Version 6.9.5

Mein webpack-dev-Server/Client/webpack.config.js Datei ist wie folgt;

module.exports = { 
    module: { 
     rules: [ 
      { 
       test: /\.pug$/, 
       use: [ 
        "pug-loader?self", 
       ] 
      }, 
      { 
       test: /\.css$/, 
       use: [ 
        "style-loader", 
        "css-loader" 
       ], 
      } 
     ] 
    } 
}; 

Answer 1

Siehe https://vue-loader.vuejs.org/en/configurations/pre-processors.html

{ 
    test: /\.vue$/, 
    loader: 'vue-loader', 
    options: { 
    loaders: { 
     scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss"> 
     sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass"> 
    } 
    } 
} 

Auch eine SCSS Regel

{ 
    test: /\.s(a|c)ss$/, 
    use: [ 
    "style-loader", 
    "css-loader", 
    "sass-loader" 
    ] 
} 

Answer 2

npm installieren --save-dev Sass-loader Stil-loader CSS-loader

vielleicht umfassen, Sie haben 'style-loader' und 'css-loader' noch nicht installiert