当Vue-CLI 3创建项目时，会创建public / index.html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Website</title>
</head>
<body>
<noscript>
<strong>We're sorry but the website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
我想在头部添加一个外部CSS文件，但源文件在SASS / SCSS中。我想要这个文件的原因是围绕Vue应用程序（<div id="app">/<div>）设置标记样式，就像<body>元素一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Website</title>
<link href="[I want to reference a compiled SCSS file here]" rel="stylesheet" type="text/css" />
</head>
<body>
<noscript>
<strong>We're sorry but the website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
我阅读了关于CSS的Vue-CLI 3指南，https://cli.vuejs.org/guide/css.html，但我的印象是该页面上的建议是将SASS集成到单文件组件（* .vue文件）中，比如允许单个文件组件访问全局SASS变量。我是否可以使用Vue-CLI 3构建过程来编译与任何* .vue文件没有直接关系的SASS文件，但仍然是用于部署目的的Vue应用程序的一部分？
我无法找到我的具体问题的答案。
但是，我确实在Vue Loader Github回购中找到了一个讨论。
https://github.com/vuejs/vue-loader/issues/328#issuecomment-363165459
https://github.com/vuejs/vue-loader/issues/328#issuecomment-363189176
基本上，任何不包含SASS变量或mixin的全局样式都可以导入App.vue的样式块而不带“scoped”属性。
<style lang="scss">
@import './scss/main.scss';
</style>
任何需要访问SASS变量的Vue组件都需要对Vue.config.js进行少量更改
// vue.config.js
module.exports = {
css: {
loaderOptions: {
// pass options to sass-loader
sass: {
// @/ is an alias to src/
// so this assumes you have a file named `src/variables.scss`
data: `@import "@/variables.scss";`
}
}
}
}