vue3 页面写scss未生效
时间: 2023-07-01 18:18:42 浏览: 100
如果你在 Vue3 中写了 SCSS 样式但未生效,你可以尝试以下解决方法:
1. 确认是否安装了 `sass` 和 `sass-loader`,可以通过以下命令安装:
```
npm install sass sass-loader --save-dev
```
2. 确认是否在 `vue.config.js` 中配置了 `scss` 的 loader,示例如下:
```
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `@import "~@/styles/variables.scss";`
}
}
}
}
```
3. 确认是否在组件中正确引入了 SCSS 文件,示例如下:
```
<style lang="scss">
@import '@/styles/variables.scss';
...
</style>
```
如果以上方法都没有解决问题,可以尝试重启服务或者清除缓存重新构建项目。
相关问题
vue3 安装使用 scss
要在Vue 3项目中使用SCSS,您需要进行以下步骤:
1. 首先,确保您已经安装了Vue CLI。如果没有安装,请使用以下命令进行安装:
```
npm install -g @vue/cli
```
2. 创建一个新的Vue项目。使用以下命令:
```
vue create my-project
```
在创建项目的过程中,您可以选择自定义设置,确保选择 SCSS 作为预处理器。
3. 进入到您的项目目录中:
```
cd my-project
```
4. 安装 `sass` 和 `sass-loader`。这两个包是用于处理SCSS的依赖项。使用以下命令进行安装:
```
npm install sass sass-loader
```
5. 打开项目中的 `vue.config.js` 文件(如果没有则创建一个)。
6. 在 `vue.config.js` 文件中,添加以下代码来配置SCSS预处理器:
```javascript
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `@import "@/assets/styles/main.scss";`
}
}
}
}
```
这将告诉Vue在每个组件中使用SCSS时自动导入 `main.scss` 文件。
7. 创建一个名为 `main.scss` 的文件(或者您可以选择其他名称),并将其放入 `src/assets/styles/` 目录中。
8. 现在,您可以在您的组件中使用SCSS了。只需在组件的 `<style>` 块中使用SCSS语法编写样式即可。
这样,您就可以在Vue 3项目中使用SCSS了!记得重启开发服务器以使更改生效。
vue3设置scss全局变量
在Vue 3中设置全局的SCSS变量有几种方法可以实现。一种方法是在项目的`vue.config.js`文件中进行配置。你可以在`css`的`loaderOptions`中添加以下代码:
```javascript
css: {
loaderOptions: {
sass: {
additionalData: `@import "./src/assets/index.scss";`
}
}
}
```
请确保你已经在项目中创建了`index.scss`文件,并在其中定义了全局的SCSS变量。这样,在重新运行项目后,你就可以在整个Vue应用中使用这些全局变量了。\[1\]
另一种方法是在Vue组件中直接引入全局的SCSS文件。你可以在组件的`<style>`标签中使用`lang="scss"`来指定SCSS语法,并在其中引入全局的SCSS文件,如下所示:
```html
<style lang="scss" scoped>
@import "@/assets/index.scss";
</style>
```
请注意,这种方法只能在单个组件中使用,而不是全局生效。\[3\]
无论你选择哪种方法,都需要确保你已经正确配置了SCSS的加载器,并且在项目中正确引入了全局的SCSS文件。\[2\]
#### 引用[.reference_title]
- *1* *3* [Vue 3.0 scss 全局变量](https://blog.csdn.net/qq_22741833/article/details/130301986)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [【vue】vue-cli3配置scss全局变量](https://blog.csdn.net/ann295258232/article/details/118358401)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)