在vue2.x中安装sass并配置

最新推荐文章于 2024-05-21 15:42:53 发布
最新推荐文章于 2024-05-21 15:42:53 发布
阅读量6.5k 收藏 8
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35859392/article/details/87488380
版权

在vue2.x中安装sass并配置

　　在vue中安装sass先检查系统中有没有安装sass,在命令行中输入 sass -v

　　

　　表示sass在电脑中已有，否者可以参考我这篇博客安装Sass遇到的坑

一、先安装sass

　　cmd打开命令行，到项目的位置

npm install node-sass --save-dev  //安装node-sass
npm install sass-loader --save-dev  //安装sass-loader
npm install sty
最低0.47元/天 解锁文章
瞎转悠达
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2.x+webpack快速搭建前端项目框架详解
08-28
vue2.x+webpack快速搭建前端项目框架详解是当前前端开发领域中非常流行的一种技术栈，本文将详细介绍如何快速搭建基于vue2.x、webpack、vuex、sass+axios、elementUI等技术栈的前端项目框架。 首先，需要安装node...
vue2+ 在main.js 引入scss文件报错问题
weixin_30367543的博客
07-15 488
安装sass后，在webpack.base.conf.js中添加了 其实上面这个可以不用添加，因为vue-cli脚手架已经在build/utils.js文件下默认配置好sass了，如果再在webpack.base.conf.js中配置就会产 生冲突了，所以不用再添加上面这一条了。 ...
Vue 安装 scss (安装步骤/项目使用/报错解决)
nanfangxinchai的博客
08-01 9670
1.1.1.记点：sass-loader：把 sass编译成css, node-sass：nodejs环境中将sass转css。1.1.安装sass-loader/node-sass(前者依赖于后者)
vue-cli2项目中使用scss
最新发布
Hi_MrXiao的博客
05-21 541
首先要搞清楚Sass和Scss的区别：实际上Sass和Scss是同一种东西，Scss是 Sass3 引入新的语法，它们都是css预处理器。：Sass 默认使用“.sass”作为文件扩展名，而 Scss 使用“.scss”作为扩展名。：Sass 最初是以严格的缩进式语法规则来书写，不带大括号和分号，这种方式使得代码更加简洁，但在某些情况下可能不如Scss直观易读；相比之下，Scss的语法允许使用大括号和分号，与常规的 css语法相似，这使得 Scss更容易被 css开发者接受和使用。
vue下载sass方式
xi_yuanl的博客
11-16 5457
此处是原生webpack使用方式，rules的loader一定注意是sass而使用的时候是test:/.scss$/这俩区别个人认为sass更加激进去掉了{}改为缩进所以大多数人是使用的是.scss。vue中如果您使用的是cli脚手架那么在创建初期系统会询问你是否使用sass勾选后，可以直接在style标签里面加入lang="scss"就能使用了。注:正式使用sass需要一定的webpack基础，建议新手先去看看webpack的使用。没有使用脚手架的话，vue使用需要完成三部分。
vue中安装sass
weixin_44302838的博客
07-13 1052
安装了几次，发现很坑的地方安装必须@版本号不然不行 npm install sass-loader@7.3.1 --save-dev //安装sass-loader npm install node-sass@4.14.1 //安装node-loader npm install style-loader --save-dev //安装style-loader这个可以不用@ 然后再vue.config.js中写 css: { loaderOpt
vue2 sass 安装及使用
lsswear的专栏
11-19 9644
vue-cli sass
Sass安装 ,配置...(vue项目中)
yuroll的博客
03-13 2978
sass-loader：把 sass编译成css。：nodejs环境中将sass转css。注意：sass-loader版本 要与。
vue-cli4.x环境搭建
01-08
1、安装 npm install -g @vue/cli 安装好了之后输入 vue -V 查看版本 （如果vue-cli和node.js版本不符的话，会报错...css 的预处理器我选择的是 Sass/SCSS(with node-sass) ，node-sass是自动编译实时的，dart-sass需
vue-cli-project：Vue.js 2.x实战开发项目脚手架
02-06
一个Vue.js项目Vue cli3.x基于Vue-cli3构造的前端开发项目模板，已在vue.config.js文件中配置好webpack，可以参考，开箱即用，欢迎大家围观指教！使用# 安装服务npm install# 启动服务npm run dev说
vue使用Sass时报错问题的解决方法
10-14
或者在`@`符号后写路径（Vue 3.x无需配置，Vue 2.x可能需要在webpack配置中添加别名）： ```scss @import '@/styles/main.scss'; ``` 当遇到报错如`*!!vue-style-loader!css-loader?{"sourceMap":true}!...`，这...
vue-seed：使用ElementUI 2.x进行大型vue项目的样板
02-05
种子适用于企业应用程序的即用型UI解决方案，作为Vue样板。主题预览（分支：master） （分支：light-version） （分支：颜色版本）产品特点三套主题模板任你选第三套主题实现了换肤功能实现了动态路由功能完整的登录...
vue项目中安装sass方法
热门推荐
Y_soybean_milk的博客
05-04 1万+
1、安装sass-loader npm install sass-loader --save-dev 2、安装dart-sass npm install sass --save-dev 你也可以合并步骤1、2为 npm i sass sass-loader -D 注意：你也可以选择安装node-sass，来替换dart-sass,但非常不建议！ 1、dart-sass 和 node-sass都是用来将sass编译成css的工具。但node-sass 与 Node.js 版本相关联，这就导致，一旦本地
Vue2.引入sass
qq_45061461的博客
06-18 2312
base.conf.js文件，在该文件module.export中的module.rules加入解释scss文件的loade。在项目中的build目录找到。如果报错提示，就是版本过高。3.配置loader。
Vue2+Vue Cli项目安装及配置Sass流程
qq_31569459的博客
04-09 793
npm 8.5.2根据官方说明 Vue CLI 项目天生支持和包含在内的预处理器。Vue CLI 项目确实默认支持 Sass，而且在创建项目时，你可以选择预处理器（Sass/Less/Stylus）。默认情况下，Vue CLI 会为你配置好相关的 webpack loader 来处理 Sass 文件。在创建项目时选择了 Sass 预处理器的话，Vue CLI 会自动安装必要的依赖（如和sass。
vue cli 安装步骤vue配置SCSS，安装fastclic，Vue cli 框架中各个目录的作用，以及前端构建和打包工具
pengpeng9512的博客
10-16 416
vue cli 安装步骤 1、 vue-cli 脚手架安装 环境 资源 测试 热启动 打包上线 ****vue-cli 脚手架 安装 （1）测试是否有node 环境 并且 node 版本>=v 8.11.0 使用命令 ： node -v （2）为了让下载包的速度快 安装 cnpm 或者 yarn cnpm -v npm install yarn -g （3）全局安装 vue-cl...
vue2安装scss全网最简单
weixin_44856917的博客
03-16 454
无非就是里面版本一个高了，一个低了，因为node.js版本高了…非常搞，让我一度认识他们是shabiiiii。解决方法手动修改vue项目中package.json页面。在dependencies中修改。然后手动install。
vue中如何安装sass，sass安装命令
鹏仔工作室的秘密基地
08-13 1731
安装sass依赖 npm install --save-dev sass-loader npm install --save-dev node-sass 安装完以后，在vue页面的style中添加 lang="scss" CSS <style lang="scss" scoped></style> 添加后，自行写一段嵌套的css，如果有效果就OK了。 如果报错，在package.json检查下sass-loader版本，可能是版本太高了，可以进行安装低版本即可。.
vue 安装 scss
金乌的博客
09-22 1万+
node-sass与 node 版本不兼容时，如果node版本过高时，最好对node版本进行降级，升级node-sass可能有隐藏风险；如果sass版本过高，可以卸载sass，重新安装指定版本。安装scss (安装sass-loader node-sass 前者依赖于后者)node-sass：nodejs环境中将sass转css。安装指定版本：当由于版本过高报错时，可以指定要安装的版本。sass-loader：把 sass编译成css。安装速度很慢时，可以尝试镜像安装。
vue cli中的sass loader配制
05-21
要在Vue CLI项目中使用Sass，需要安装`sass`和`sass-loader`依赖项。可以使用以下命令安装它们： ``` npm install sass sass-loader --save-dev ``` 在安装依赖项之后，需要在Vue CLI的Webpack配置中添加Sass Loader。有两种方法可以实现这一点：在`vue.config.js`文件中配置，或在`webpack.config.js`文件中直接编辑。 ### 在vue.config.js中配置 如果您使用的是Vue CLI 3.x或更高版本，则可以通过在项目根目录下创建`vue.config.js`文件并将以下内容添加到该文件中来配置Sass Loader： ```javascript module.exports = { css: { loaderOptions: { sass: { prependData: `@import "@/styles/_variables.scss";` } } } } ``` 这将为所有Sass样式表添加一个名为`_variables.scss`的全局变量文件。如果您有其他Sass文件需要包含在所有样式表中，请将它们添加到`prependData`选项中。 ### 直接编辑webpack.config.js文件 如果您想要更直接地编辑Webpack配置，则可以在项目根目录下创建`vue.config.js`文件，并将以下内容添加到该文件中： ```javascript module.exports = { chainWebpack: config => { const sassRule = config.module.rule('sass'); sassRule.uses.clear(); sassRule .use('vue-style-loader') .loader('vue-style-loader') .end() .use('css-loader') .loader('css-loader') .end() .use('sass-loader') .loader('sass-loader') .options({ prependData: `@import "@/styles/_variables.scss";` }) .end(); } } ``` 这将重新配置Sass规则，并将`_variables.scss`文件添加到所有样式表中。如果您有其他Sass文件需要包含在所有样式表中，请将它们添加到`prependData`选项中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值