sass 安装使用 webstrom参数配置

ruby和sass网盘

第一步、根据自己电脑安装对应版本ruby,推荐默认路径(路径不要有中文)

找到自己ruby路径,如下图

输入语句  gem install sass(直接从网上下载)也可以输入gem install sass的路径(拖拽进来就行)

第二步、配置webstrom参数(图丑,将就)

file => setting(不是default setting) => file watches =>scss(没有就点击右边+ 添加)

双击scss,选择scss.bat路径

arguments:--no-cache --update $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

(自动编译)

output paths to refresh:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

(生成并列css文件夹,默认生成css文件夹在scss下)

### 在 Vue 项目中安装和配置 Sass #### 安装依赖包 为了能够在 Vue 项目中使用 Sass (SCSS),需要先安装 `sass` 和 `sass-loader`。可以通过 npm 或 yarn 来完成这一步骤。 ```bash npm install sass sass-loader --save-dev ``` 或者如果偏好使用 Yarn: ```bash yarn add sass sass-loader --dev ``` #### 配置 Vite 项目以支持 SCSS 对于采用 Vite 构建工具的新版 Vue 项目,可以按照如下方式修改 vite.config.js 文件来确保所有的 `.scss` 文件能够被正确解析并应用全局样式变量[^1]。 ```javascript // vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path'; export default defineConfig({ plugins: [ vue() ], resolve: { alias: { '@': path.resolve(__dirname, './src') } }, css: { preprocessorOptions: { scss: { additionalData: '@import "@/styles/constant.scss";' } } } }) ``` 此设置会自动引入位于 `/src/styles/constant.scss` 的文件作为全局可用的 SCSS 变量集合。 #### Webpack项目的配置方法 如果是基于Webpack构建的老版本Vue CLI服务端渲染(SSR)或单页应用程序(SPA),则需编辑webpack配置文件(通常是`vue.config.js`)加入对`.scss`的支持: ```javascript module.exports = { module: { rules: [{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }] } }; ``` 上述规则告诉 Webpack 如何处理 `.scss` 结尾的文件,并通过一系列 loader 将其编译成 CSS 插入页面中[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值