vue使用sass

在安装webpack的依赖时,需注意不要使用最高版本的sass-loader和node-sass,推荐使用7.3.1和4.14.1版本。配置webpack时,在webpack.base.conf.js的module.rules中添加处理SCSS文件的规则。然后在代码中可以正常使用SCSS语法,如设置.hello类内h1和h2的样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、安装依赖

webpack解析loader 注意版本别使用最高,会报错的,7.3.1可用,直接指定版本。

npm i -D sass-loader@7.3.1

sass-loader依赖于node-sass,同样指定版本。

npm i -D node-sass@4.14.1

二、配置webpack

在根目录build文件夹下的webpack.base.conf.js的module.rules里面添加配置     
      {
        test: /\.scss$/,
        loaders: ['style','css','sass'],
      },

三、使用方法

<style lang="scss" scoped>
  .hello {
    h1, h2 {
      font-weight: normal;
      color: red;
    }
  }
</style>

### 在 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、付费专栏及课程。

余额充值