vue sass 安装

1、node 安装依赖

npm install node-sass --save-dev

npm install sass-loader --save-dev

2、sass全差碧局引用

npm install --save-dev sass-resources-loader

配置build/utils.js

function resolveResource(name) {

return path.resolve(__dirname, '../static/style/' + name)

}

function generateSassResourceLoader() {

var loaders = [

cssLoader,

    'sass-loader',

    {

loader:'sass-resources-loader',

      options: {

// 多个瞎樱文件时用数组的形式传入，单个文件时可以直磨庆丛接使用path.resolve(__dirname, '../static/style/blog.scss'

        resources: [resolveResource('blog.scss')]

}

}

]

  if (options.extract) {

return ExtractTextPlugin.extract({

use: loaders,

      fallback:'vue-style-loader'

    })

}else {

return ['vue-style-loader'].concat(loaders)

}

}

return {

css:generateLoaders(),

  postcss:generateLoaders(),

  less:generateLoaders('less'),

  // sass: generateLoaders('sass', { indentedSyntax: true }),

// scss: generateLoaders('sass'),

//配置sass-resources-loader

  sass:generateSassResourceLoader(),

  scss:generateSassResourceLoader(),

  stylus:generateLoaders('stylus'),

  styl:generateLoaders('stylus')

}

安装如下包，sass是依赖于node-sass ，所庆拦游以要安装node-sass

npm install node-sass --save-dev

npm install sass-loader --save-dev  

找到build目录下的webpack.base.conf.js文件，在module/rules下增加如下衡扰配置

{

test: /\.sass$/,

loaders: ['style','css','scss']

}

在使用的时候在style标签上添加 lang="scss"  ，import引入scss文件，

<style lang="scss">

@import 'css/index.scss'

</style>

以上 *** 作就可以了，如果编译出现错误，那可能就是版本过高的原因，所誉销以需要降低版本

npm uninstall sass-loader

npm install sass-loader@7.0.3 --save-dev

---