mpvue全局引入sass文件的方法步骤

下面我详细讲解在mpvue中全局引入sass文件的方法。

1. 在mpvue中全局引入sass文件的方法步骤

步骤如下：

1. 安装sass-loader和node-sass模块：

npm i sass-loader node-sass -D

1. 在 build/webpack.base.conf.js 中添加sass-loader配置：

// build/webpack.base.conf.js

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

这段代码会对所有 .scss 文件使用 sass-loader 进行处理。

1. 在 src/main.js 中引用 .scss 文件：

// src/main.js

import Vue from 'vue';
import App from '@/App';
import 'assets/scss/main.scss';

const app = new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
});

这样，在每个组件上都可以使用全局的样式。

1. 示例说明

（1）在组件中使用全局样式

在src/components/Example.vue中，我们可以使用在main.scss中定义的全局样式：

<template>
  <div class="example">Hello World</div>
</template>

<script>
export default {
  name: 'Example'
}
</script>

<style lang="scss" scoped>
.example {
  font-size: 20px;
  color: #333;
}
</style>

注意，这里添加了 scoped 属性，表示这个样式只作用于当前组件内。

（2）在全局样式文件中引用其他scss文件

在src/assets/scss/main.scss中，我们可以使用@import引用其他scss文件：

@import './variables';
@import './mixins';

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #333;
}

.example {
  margin: 20px;
  padding: 10px;
}

variables.scss和mixins.scss是定义全局变量和mixin的文件。

以上就是在mpvue中全局引入sass文件的完整攻略。如果还有问题，可以再问我。