vue-cli项目引入less可以直接引用，引入sass后不能直接用，配置后也报错

Question

引入了node-sass和sass-loader，网上的方法都试过，还是报错
webpack.base.config文件配置

var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
            test: /\.scss$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }]
      },
//    {
//         test: /\.scss$/,
//         loaders: ["style", "css", "sass"]
//    },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}

加上lang="scss"后的报错信息

./~/.npminstall/css-loader/0.28.4/css-loader?{"minimize":false,"sourceMap":false}!./~/.npminstall/vue-loader/12.2.2/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-2d29af2d","scoped":true,"hasInlineConfig":false}!./~/.npminstall/sass-loader/6.0.6/sass-loader/lib/loader.js?{"sourceMap":false}!./~/.npminstall/vue-loader/12.2.2/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Nav.vue
Module build failed: Error: ENOENT: no such file or directory, scandir 'D:\xampp\htdocs\ht-mindcherish\node_modules\.npminstall\node-sass\4.5.3\node-sass\vendor'
    at Error (native)
    at Object.fs.readdirSync (fs.js:952:18)
    at Object.getInstalledBinaries (D:\xampp\htdocs\ht-mindcherish\node_modules\.npminstall\node-sass\4.5.3\node-sass\lib\extensions.js:124:13)
    at foundBinariesList (D:\xampp\htdocs\ht-mindcherish\node_modules\.npminstall\node-sass\4.5.3\node-sass\lib\errors.js:20:15)
    at foundBinaries (D:\xampp\htdocs\ht-mindcherish\node_modules\.npminstall\node-sass\4.5.3\node-sass\lib\errors.js:15:5)
    at Object.module.exports.missingBinary (D:\xampp\htdocs\ht-mindcherish\node_modules\.npminstall\node-sass\4.5.3\node-sass\lib\errors.js:45:5)
    at module.exports (D:\xampp\htdocs\ht-mindcherish\node_modules\.npminstall\node-sass\4.5.3\node-sass\lib\binding.js:15:30)
    at Object.<anonymous> (D:\xampp\htdocs\ht-mindcherish\node_modules\.npminstall\node-sass\4.5.3\node-sass\lib\index.js:14:35)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (D:\xampp\htdocs\ht-mindcherish\node_modules\.npminstall\sass-loader\6.0.6\sass-loader\lib\loader.js:3:14)
 @ ./~/.npminstall/vue-style-loader/3.0.1/vue-style-loader!./~/.npminstall/css-loader/0.28.4/css-loader?{"minimize":false,"sourceMap":false}!./~/.npminstall/vue-loader/12.2.2/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-2d29af2d","scoped":true,"hasInlineConfig":false}!./~/.npminstall/sass-loader/6.0.6/sass-loader/lib/loader.js?{"sourceMap":false}!./~/.npminstall/vue-loader/12.2.2/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Nav.vue 4:14-511 13:3-17:5 14:22-519
 @ ./src/components/Nav.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

Answer 1

npm安装不了node-saas模块，这个问题很坑的， 你可以参考一下下面的解决方案
http://www.cnblogs.com/niepei...

Answer 2

在webpack里面配置了sass-loader吗？

Answer 3

把你的webpack.config贴一下，看看怎么配置的？

---

对比了插件版本号 试试把css-loader的版本降到0.25.0吧，另外，你的webpack版本号是多少？

Answer 4

报错信息截全一点会咋样。。
Error no such file or direc 就不知道是啥了。
这个报错是某个文件什么的没找到。贴图贴全一点。。

Answer 5

如果你是用的vue-cli搭建的环境，要使用scss的话只需要安装node-sass和sass-loader就可以了，不需要修改webpack配置文件。
vue-cli内部作了兼容处理，包括less、sacc、stylus都只需安装相应的loader模块就好，不用改配置文件。

Answer 6

node-sass安装不正确