vue sass 安装

Posted 2023-03-27

参考技术A 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')

vue中sass的配置安装流程

1.安装node-sass，因为scss是基于此库的

cnpm install --save-dev node-sass

2.安装sass-loader

cnpm install --save-dev sass-loader

全部安装完成之后，到webpack.base.conf.js的编译规则里添加scss

{

 test: /.sass$,

 loaders: [‘style‘,‘css‘,‘sass‘]

}

 

3.使用声名

<style scoped lang="scss"></style>

 

到此全部安装配置完成，即可使用scss