vue scss 安装步骤

1.安装依赖,安装最新版本,有的属性会不支持,防止报错安装指定版本

npm install sass-loader@7.3.1 --save-dev  //安装8.0
npm install node-sass@4.14.1 --save-dev
npm install style-loader --save-dev //安装style-loader 有些人安装的是 vue-style-loader 其实是一样的!

2.配置文件

在webpack.base.conf.js 文件下的配置 rules
rules:[
    ...
    { 
        //从这一段上面是默认的!不用改!下面是没有的需要你手动添加,相当于是编译识别scss!
        test: /\.scss?$/,
        loaders: ["style", "css", "sass"]
    }
]

3.使用方式,style标签增加lang="scss"

<style lang="scss" scoped>
...
</style>

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue项目中安装和使用SCSS,你需要按照以下步骤进行操作: 1. 在终端或命令行中使用以下命令安装SCSS依赖项: ```bash npm install sass-loader node-sass --save-dev ``` 这将安装所需的node-sass和sass-loader包。 2. 打开项目中的webpack.base.conf.js文件(一般位于build文件夹内),找到rules数组,并在其中添加以下配置: ```javascript { test: /\.scss$/, loaders: ['style', 'css', 'sass'] } ``` 这将告诉Webpack在处理.scss文件时使用sass-loader、css-loader和style-loader。 3. 确保你的组件中的style标签上添加了lang="scss"属性,以指定使用SCSS语法。 ```html <style lang="scss"> /* 在这里编写你的SCSS代码 */ </style> ``` 现在你可以在Vue组件中使用SCSS了。例如,你可以在style标签中定义变量、导入外部的SCSS文件,并在其中编写SCSS样式。 请注意,这些步骤适用于使用Vue CLI创建的Vue项目。如果你使用其他工具或框架搭建的项目,可能需要稍作调整。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue项目中使用scss](https://blog.csdn.net/weixin_45665171/article/details/129830928)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [在VUE项目中使用SCSS,从安装步骤到语法说明,带你快速入门!!](https://blog.csdn.net/jingjing217/article/details/108475413)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值