利用npm实现scss的自动编译

最新推荐文章于 2024-05-25 16:16:41 发布
最新推荐文章于 2024-05-25 16:16:41 发布
阅读量1.5k 收藏
点赞数
文章标签： javascript ruby json ViewUI
原文链接：https://my.oschina.net/u/2472316/blog/803235
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

#npm实现scss自动编译 利用npm中--watch开启自动监测，只要ctrl+s自动保存并将scss文件转译为css文件

以下说一下使用步骤： ####1. 安装node和npm ####2. 安装ruby

SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。

####3.安装sass

假定你已经安装好了Ruby，接着在命令行输入下面的命令：

gem install sass

####4.下面开始做实例，新建一个demo文件，文件内分别有scss文件夹和css文件夹,并在scss文件新建一个demo.scss文件 ####5.在demo目录下右击，选择git bash here 弹出npm框 ####6.开始监测，在npm里面输入“sass --watch scss/demo.scss:css/demo.css”，回车，这是打开css文件，发现自动多了一个css文件

sass --watch sass/demo.scss:css/demo.css

####7.这时无论在demo.scss文件内编写，只要ctrl+s就会自动保存并在css文件内转译

也可以结合Package.json 写一下依赖及信息Package.json详解

转载于:https://my.oschina.net/u/2472316/blog/803235

weixin_34101784
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue sass安装
weixin_48887108的博客
09-21 797
Vue项目中 sass安装 1.sass-loader依赖于node-sass,所以要安装node-sass cnpm install node-sass --save-dev //安装node-sass cnpm install sass-loader --save-dev //安装依赖包sass-loader cnpm install style-loader --save-dev //安装style-loader 2.在bui...
npm scss 安装_Vue+scss白天和夜间模式切换功能的实现方法
weixin_32491317的博客
01-12 4589
安装Scss注：若安装失败可以考虑使用cnpm，或者切换npm源等方式安装。npminstallnode-sass--save-dev//安装node-sassnpminstallsass-loader--save-dev//安装sass-loadernpminstallstyle-loader--save-dev//安装style-loader新建页面D...
reset.css:正版Eric Meyer的Reset CSS捆绑为npm包
05-08
reset.css 正版捆绑为npm软件包。 安装 npm install reset.css --save 例子 当与使用时： @import 'reset.css' ; html { box-sizing : border-box; } * , * : before , * : after { box-sizing : inherit; } 执照 无（公共领域）
SCSS 基本使用详解
最新发布
2301_79262050的博客
05-25 916
SCSS 是 Sass（Syntactically Awesome Stylesheets）的其中一种语法，是一种预处理器脚本语言，能够扩展 CSS 的功能，使其更加强大和高效。SCSS 保留了 CSS 的原有语法，同时增加了变量、嵌套规则、混合宏（mixin）、继承等高级功能。本文将详细介绍 SCSS 的基本使用方法，帮助读者快速上手并掌握 SCSS 的核心概念和技巧。
npm包、scss
xxxjun_的博客
01-07 1066
npm包管理工具 在统一的地方下载项目依赖的第三方包 安装:随nodejs一起安装 检查:npm -v (检查安装是否成功) 下载: npm install 包名 -g (-g为全局安装,任意目录下可以使用) npm install jquery 删除:npm uninstall 包名 -g 项目管理:(初始化) npm init npm init -y (-y为默认)...
scss是什么？安装使用步骤是？有哪几大特性？
jsjbdndn的博客
11-08 390
scss见解
vue安装和使用scss及sass与scss的区别详解
12-10
1. 安装依赖：npm install node-sass sass-loader -D 2. webpack.base.conf.js文件 module: { { //手动添加这一条，相当于是编译识别sass! test: /\.scss$/, loaders: ["style", "css", "sass"]} } 3. 在.vue文件...
bootstrap-npm：有关如何使用npm包含，自定义和编译Bootstrap的SassCSS的演示
02-01
这将在运行`npm run build:css`时，将`src/scss/`目录下的Sass文件编译为CSS，并输出到`dist/css`目录。 3. **自定义Bootstrap** Bootstrap的Sass源码位于`node_modules/bootstrap/scss`目录下。你可以创建自己的...
hanako-scss:SCSS工具包
04-10
创建一个.scss文件（编译的入口） 在文件顶部包括以下行： npm $html-font-size : 18 px ; $spacings : .5 , 1 , 2 , 2.5 , 3 , 4 , 0 ; $colors : ( white : #fff , black : #000 , gray : #808080 , ...
rollup-plugin-scss:汇总并编译多个.scss，.sass和.css导入
05-13
npm install --save-dev rollup-plugin-scss # Rollup v0.59 and below npm install --save-dev rollup-plugin-scss@0 用法 // rollup.config.js import scss from 'rollup-plugin-scss' export default { input : ...
gulp-es6：用于Javascript ES6编译的Gulpfile设置，以及SCSS，图像和字体处理
02-03
`gulp-es6`配置了SCSS编译任务，将`.scss`文件转换为标准的CSS，然后可以进一步进行minify（压缩）和concatenate（合并）操作，减少HTTP请求，提高页面加载速度。 3. **图像处理**：项目可能包含大量的图像资源，如...
npm安装scss
m0_69149657的博客
03-02 442
【代码】npm安装scss。
npm、sass
qq_38256266的博客
07-21 3758
npm、sass一、npm1.1、什么是npm1.2、npm能干什么1.3、npm的安装1.4、npm的更新二、package.json文件2.1、什么是package.json文件2.2、作用是什么2.3、怎么创建2.4、package.json的内容2.5、指定依赖的包2.6、全局安装2.6.1、什么是全局安装三、sass3.1、什么是sass3.2、sass后缀名的区别3.3、下载sass3.4、sass的使用3.5、sass的变量和注释3.6、sass 嵌套3.7、sass插值3.7.1、什么是插值
如何使用npm安装和使用sass和less
m0_65450343的博客
05-18 5718
首先，需要电脑安装有node和git 1，如何在npm安装和使用sass 安装命令： npm I node-sass -g 判断是否安装成功： node-sass -v 将scss编译为css: 例如： node-sass a.scss b.css 为什么是scss而不是sass文件，因为scss是sass的升级版，创建sass文件时后缀为 .scss 实时监听scss文件的变化： 例如： node-sass -...
自动编译scss文件为css
qq_36587340的博客
07-23 572
第一步下载 Live Sass Compiler 第二步 点击右下角即可自动编译并watch整个项目下的sass文件 第三步保存即可看到编译好的css文件
npm及webstrom(自动)编译scss全攻略(输出路径)
zoro的博客
08-24 1146
1. Ruby安装 SCSS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SCSS。 推荐使用https://rubyinstaller.org/downloads/上下载的Windows一键安装包:) 安装包路径（64位）： https://dl.bintray.com/oneclick/rubyinstaller/rubyinstall...
vue项目中使用scss
热门推荐
weixin_45665171的博客
03-29 1万+
vue项目中安装、引入、使用scss
Vue 中 npm 安装 sass 项目中使用scss运行后报错
渣渣宇的博客
06-02 1802
主要原因是版本过高导致的 npm安装一些包的时候，会默认安装最新版本，但过高版本的sass会导致scss编译错误 解决思路 项目中使用scss时，sass-loader要安装^7.3.1版本(package.json中设置) 目前这个问题仅在Vue中有遇到过 ...
npm 下包scss
08-25
要在npm下安装scss相关的包，您需要执行以下步骤： 1. 首先，您需要安装node-sass包，该包是sass-loader的依赖项。您可以使用以下命令来安装node-sass： ``` npm install node-sass --save-dev ``` 2. 接下来，您需要安装sass-loader包，这是用于加载和解析scss文件的webpack加载器。可以使用以下命令来安装sass-loader： ``` npm install sass-loader --save-dev ``` 3. 最后，您还需要安装style-loader包，这是用于将编译后的样式添加到页面中的webpack加载器。可以使用以下命令来安装style-loader： ``` npm install style-loader --save-dev ``` 4. 安装完这些包后，您需要在webpack的配置文件中添加相应的规则。您可以在build文件夹下的webpack.base.conf.js文件中的module.rules中添加以下配置： ``` { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } ``` 5. 最后，您可以使用以下命令将scss文件转换为css文件： ``` sass XXX.scss YYY.css ``` 这将把XXX.scss文件转换成YYY.css文件。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [npm安装scss](https://blog.csdn.net/ch_13157582015/article/details/123040943)[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%"] - *3* [npm包、scss](https://blog.csdn.net/xxxjun_/article/details/122371747)[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、付费专栏及课程。

余额充值