Vueファイル内のSassがコンパイルされない

Question

npm dev watchまたはnpm dev runでSassをコンパイルするとエラーが発生します。

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 

私はChat.vueファイル内に問題があると書いています。私はnpmのようなフロントエンドのツールに熟練していないので、何を試していいのか分かりません。私はnpm install sass-loader node-sass webpack --save-devをここ（https://github.com/vuejs/vue-loader/issues/363）の指示に従って動こうとしましたが、違いはありませんでした。

ファイルの実際の内容は、.vueファイル内のほぼすべてのスタイルコンテンツで発生するため、関係はありません。

<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バージョン3.10.10 ノードバージョン6.9.5

次のように私のWebPACK-devのサーバー/クライアント/ webpack.config.jsファイルです。

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

Answer 1

は、また

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

Answer 2

NPMは

多分--save-devのSASS-ローダースタイルローダCSS-ローダーをインストールSCSSルールが含ま

{ 
    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"> 
    } 
    } 
} 

https://vue-loader.vuejs.org/en/configurations/pre-processors.htmlを参照してください。あなたはまだ 'スタイルローダー'と 'cssローダー'をインストールしていません