Vue2中如何使用sass实现自定义样式功能（同一个东西展示几种样式）

第一种：利用自定义css文件动态改变页面样式（麻烦）：

1、css属于静态资源，要放在静态资源下，不然不起作用。如下：

 2、在vue文件里面添加事件即可，利用新增节点在head里面添加<link>样式表。

<p class="type" @click="languages('zw')">藏文</p>
<p class="type zh" @click="languages('zh')">汉文</p>
<p class="type" @click="languages('en')">English</p>

methods:{
        // 在头部添加样式表
        loadStyle(url) {
          const link = document.createElement('link');
          link.rel = 'stylesheet';
          link.href = url;
          document.head.appendChild(link);
        },
        languages(languages){
            localStorage.setItem('languages',languages)
            if(languages=="zw"){
                this.loadStyle('../../../static/styles/zw.css');
            }else if(languages=="zh"){
                this.loadStyle('../../../static/styles/zh.css');
            }else{
                this.loadStyle('../../../static/styles/en.css');
            }
        },
    }

 注意：1.样式的先后顺序。会先用头部的样式表。

            2. 刷新之后样式就变成原来的了，所以要在需要改变样式的组件里面创建的时候重新获取添加样式。

第二种：利用自定义sass文件Sass混合宏动态改变页面样式（简单）：

1、下载：先要在node里面下载sass包。

sass-loader需要依托于node-sass运行，node-sass的运行环境是node，所以说需要下载sass-loader和node-sass两个包，同时node-sass要兼容node版本。

兼容node版本14——16
npm install --save-dev node-sass@4.14.1
npm install --save-dev sass-loader@7.3.1

npm uninstall sass-loader
npm uninstall node-sass 

具体node与node-sass匹配版本如下：

 如果版本不对，卸载在重新装。也可以在package.json里面更改版本号，在重新安node_modules

2、新建：新建varibale.scss文件写上颜色，字体，背景的属性等配置文件。

3、 新建mixin.scss 定义mixin方法的文件。

// 定义mixin方法的文件。
@charset "utf-8";
@import "./varibale.scss";/*引入配置*/

@mixin font_size($size){/*通过该函数设置字体大小，后期方便统一管理；*/
  font-size:$size;
  [data-theme="theme1"] & {
    font-size:$font-size-theme1;
  }
  [data-theme="theme2"] & {
    font-size:$font-size-theme2;
  }
  [data-theme="theme3"] & {
    font-size:$font-size-theme3;
  }
}

@mixin font_color($color){/*通过该函数设置字体颜色，后期方便统一管理；*/
	color:$color;
  [data-theme="theme1"] & {
    color:$font-color-theme1;
  }
  [data-theme="theme2"] & {
    color:$font-color-theme2;
  }
  [data-theme="theme3"] & {
    color:$font-color-theme3;
  }
}

 4、引入：为了不每个组件都引入.scss文件，可以全局引入。

要如何在我们的vue项目中全局引入scss文件呢？

main.js可以直接import css文件，而不可以直接import scss文件。
在index.html中link引入的话，不起作用。
公共样式可以写在app.vue这个父组件的style标签中，这样我们写的子组件就能继承这些公共样式，但是！！！我们自定义的scss的变量继承不了！！
如果我们想使用公共的scss样式变量（比如app的主题颜色），我们就只能是每写一个.vue文件都要在style标签里面@import “global.scss”这个公共scss样式文件，但是这样做，会很麻烦。

（上述情况，less同sass一样，存在这些问题，但是less没有以下解决办法，sass有。）

但sass的mixin与全局变量文件需在多处引入十分麻烦，可以通过sass-resources-loader达到全局注入，终身受益的目的。

安装

npm i sass-resources-loader --save -dev

配置

在

{
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
},

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/mixin.scss')
        }
      }
    ),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

5、使用

原理:

通过设置html的attribute属性在封装的函数中进行判断，进行相应的设置不同的颜色

css中 [ ] 可以识别到在html标签上设置的属性，所以在html上对应属性发生变化时，就会执行相应的样式，

这一步有点类似于平时给div添加一个.active属性，css自动执行相应样式。

<p class="type" @click="languages('theme1')">藏文</p>
<p class="type zh" @click="languages('theme2')">汉文</p>
<p class="type" @click="languages('theme3')">English</p>

languages(theme){
            localStorage.setItem('data-theme',theme)
			window.document.documentElement.setAttribute('data-theme', theme)
        },

<style  lang="scss" scoped>
    .type{
        @include font_color('font-color-theme');
    }
</style>

注意：刷新样式没了，要在main.js里面添加

注意：样式的先后顺序。会先用sass样式表。

window.document.documentElement.setAttribute('data-theme', localStorage.getItem('data-theme')?localStorage.getItem('data-theme'):'')

其他： 

1、单文件引入：

<style  lang="scss" scoped>
@import "../../assets/mixin.scss";
.navItem{
    @include font_size('font-size-theme');
}
</style>

2、也可以在app.vue里引入当作全局， @import。注意：不要在 App 组件里写 scoped ，这样引入的样式都会应用到每个组件上。 

3、sass的条件写法： 

.navItem{
    @if (1+1=2){
      font-size:$font_size_20;
    }
    @else{
      font-size:$font_size_40;
    }
  }