vue项目配置sass及引入外部scss文件方式

为了让答案更加清晰明了，我会按照以下步骤逐一讲解：

1. 安装sass-loader和node-sass
2. 修改配置文件vue.config.js
3. 在vue组件中使用scss
4. 引入外部scss文件

接下来我将详细介绍。

1. 安装sass-loader和node-sass

在使用sass前，我们需要先安装必要的依赖sass-loader和node-sass，可以使用以下命令进行安装：

npm install sass-loader node-sass --save-dev

1. 修改配置文件vue.config.js

接下来我们需要修改vue项目的配置文件vue.config.js，添加sass相关的配置。

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/assets/scss/variables.scss";
          @import "@/assets/scss/mixins.scss";
        `
      }
    }
  }
}

• css.loaderOptions.sass.prependData：在所有scss文件编译前加入指定的代码（在本例中是引入了两个scss文件）；

• 在vue组件中使用scss

现在我们可以在vue组件中愉快的使用scss了，使用方式如下：

<template>
  <div class="container">
    <h1 class="title">{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

<style lang="scss">
.container {
  background-color: $primary-color;
  .title {
    font-size: 24px;
    font-weight: bold;
    color: $text-color;
  }
}
</style>

• style标签的lang属性设置为scss；

• 在<style>标签内写scss代码。

• 引入外部scss文件

如果我们想在vue组件中引入外部scss文件，我们只需要在css.loaderOptions.sass.prependData中添加相应的scss文件路径即可。

例如，我们要在vue组件中引入main.scss文件，代码如下：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/assets/scss/variables.scss";
          @import "@/assets/scss/mixins.scss";
          @import "@/assets/scss/main.scss";
        `
      }
    }
  }
}

值得注意的是，我们在路径中使用了@符号，而不是使用../或者./。这是因为在vue-cli 3.x中，@符号已经被设置为src目录的别名，所以我们直接使用@就可以了。

示例1：引用npm包内的scss文件

例如我们要在项目中使用bootstrap的样式，只需要安装对应的npm包依赖，然后在vue.config.js中添加相应的scss路径即可。

npm install bootstrap --save

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/assets/scss/variables.scss";
          @import "@/assets/scss/mixins.scss";
          @import "~bootstrap/scss/bootstrap.scss";
        `
      }
    }
  }
}

这里需要注意的是，使用npm包中的scss文件时，在文件路径前面加上波浪号~，表示引入node_modules目录下的包。

示例2：全局引入reset.scss

例如我们需要全局引入一个reset样式，只需要在vue.config.js中添加相应的scss路径，如下所示：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/assets/scss/reset.scss";
        `
      }
    }
  }
}

在reset.scss中写下需要的重置样式即可。

总之，以上就是完整的vue项目配置sass及引入外部scss文件方式的攻略了。如果还有其它问题，欢迎在评论区提问。