Vue文件中的Sass無法編譯

當通過npm dev watch或npm dev run編譯sass時，出現錯誤。Vue文件中的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等前端工具並不熟悉，所以我不知道該怎麼嘗試。我按照這裏的指示（https://github.com/vuejs/vue-loader/issues/363）嘗試運行npm install sass-loader node-sass webpack --save-dev，但它沒有任何區別。

該文件的實際內容與.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" 
       ], 
      } 
     ] 
    } 
};

來源

2017-05-27 mikelovelyuk

那麼https://github.com/vuejs/vue-loader/issues/363#issuecomment-297196238和https://vuejs-templates.github.io/webpack/pre-processors.html呢？ – mikelovelyuk

你可以發佈你的webpack配置文件嗎？ –

@TinusWagner完成 – mikelovelyuk

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

還包括SCSS規則

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

來源

2017-05-29 08:37:09

沒有區別 – mikelovelyuk

如果還沒有，爲[.sass-loader'，'css-loader'，'sass-loader']添加.sass和.scss文件的新規則。 –

如何？我不知道語法 – mikelovelyuk

NPM安裝--save-dev的青菜，裝載機式裝載機CSS-裝載機

也許，您尚未安裝'style-loader'和'css-loader'尚未安裝

來源

2017-05-29 13:38:53 LiangJinQing

沒有區別 – mikelovelyuk

Vue文件中的Sass無法編譯

回答

相關問題