> For the complete documentation index, see [llms.txt](https://jupiter-1992.gitbook.io/jupiter-note/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jupiter-1992.gitbook.io/jupiter-note/qian-duan/vue/06vue-yin-ru-scss.md).

# 06 Vue 引入 SCSS

使用 `vue init webpack` 生成的 vue 模板项目中引入 scss 步骤：

1. `vue init my-project`
2. `npm install node-sass@4 sass-loader@7 sass-resources-loader -D`（兼容问题，需要使用旧版本的包）

   > Similar to what @KostDM said, in my case it seems like sass-loader\@11.0.0 doesn't work with vue\@2.6.12.
3. 修改 `build/utils.js` 文件如下

```javascript
// scss: generateLoaders('sass')

scss: generateLoaders('sass').concat({
  loader: 'sass-resources-loader',
  options: {
    resources: path.resolve(__dirname, '../src/assets/styles/index.scss'),
  },
})
```

之后在 `main.js` 中可以不需要再引入全局 scss 文件：

```javascript
// import '@/assets/styles/index.scss'
```

就此，大功告成！

需要注意一点，新版本的 `node-sass` 和 `sass-loader` 与 vue 不兼容，所以需要使用旧版本的包。

参考文档：

* [vuejs-templates 官方文档](http://vuejs-templates.github.io/webpack/)
* [vue 配置 sass、scss 全局变量](https://segmentfault.com/a/1190000018219877)
* [TypeError: this.getOptions is not a function](https://stackoverflow.com/questions/66082397/typeerror-this-getoptions-is-not-a-function)
* [webpack-simple:Invalid CSS after](https://github.com/vuejs-templates/webpack-simple/issues/107)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jupiter-1992.gitbook.io/jupiter-note/qian-duan/vue/06vue-yin-ru-scss.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.