idea里面配置sass文件

最新推荐文章于 2023-05-28 11:04:01 发布
最新推荐文章于 2023-05-28 11:04:01 发布
阅读量810 收藏
点赞数
分类专栏： IDEA 文章标签： idea sass 配置 Ruby
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42220130/article/details/114537813
版权

如果没有安装sass 安装sass

如果没有File Watchers选项，先安装插件File Watchers

File->Settings->Plugins-File Watchers
在这里插入图片描述
安装插件后重启idea
File->Settings->Tools->File Watchers

使用模板
在这里插入图片描述
在这里插入图片描述
填写你安装后的sass.bat目录
在这里插入图片描述

D:\Program Files\Ruby26-x64\bin\sass.bat

完毕，如果不行，重启idea即可

自己定义
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
Program 填写安装sass的sass.bat地址

D:\Program Files\Ruby26-x64\bin\sass.bat

Arguments

$FileName$:$FileNameWithoutExtension$.css

Output paths to refresh

$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

Working directory

$FileDir$

自动定位文件所在的位置
在这里插入图片描述

weixin_42220130
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
aem-ide-tooling-4-intellij:用于Intellij IDEA的AEM工具插件
05-13
用于IntelliJ IDE插件的AEM工具 寿命终止通知 由于IntelliJ的不断变化（破坏了向后兼容性），我们在维护此开源项目方面面临太多负担。 很遗憾决定终止此插件的开发。 我们建议您使用另一个插件，例如： : 。 要求 此插件需要运行IntelliJ IDEA 2016.2或更高版本。 发布： 1.0.3.5-beta版本已发布。 在发布部分中查看。 注意：在1.0.3.5中，我们从插件组件迁移到了插件服务，这可能使该插件与较早的IDEA插件不兼容。 如果遇到这种情况，请告知我们，以便我们更新文档并可能找到解决方案。 注意：由于IntelliJ API内的更改，更新期间某些存储的数据可能会丢失。 如果您的配置丢失，则只需重新创建它；如果您的模块不存在，则只需单击验证即可重建它们。 可以在GitHub上的“代码”->“发布”部分中找到新版本： 对于开发人员 该插件依赖
IDEA file watcher sass 多级文件目录输出配置
zhouwangzong的专栏
02-01 1664
以下使用sass示例: webapp/resources/sass/user/a.sass webapp/resources/css/user/a.cssarguments配置： --style compressed --no-cache --update --sourcemap $FileName$:$FileParentDir(sass)$\css\$FileDirPathFromParent...
如何在Idea打开一个本地项目（超详细版）
热门推荐
weixin_43809795的博客
06-16 3万+
背景 网上关于Idea的介绍和使用其实很多了，但是答应了某人还是要写一个打开项目的详细教程。 补充 关于Idea中的Project和Module
IntelliJ IDEA sass环境配置及常见报错处理
weixin_30567225的博客
03-27 383
1、下载安装ruby，网上教程很多的，安装完之后在命令行输入ruby -v检查一下是否安装成功了。（注意安装的时候要勾选第二项）。 2、安装compass gem install compass 然后compass -v检查是否安装成功以及版本信息。 3、安装normalize gem install compass-normalize 4、安装sass，...
IntelliJ IDEA自动编译.scss为.css全流程
m0_38113882的博客
06-28 2077
在IDEA中安装File Watchers用于实现.scss文件自动编译为.css文件。安装过程中也需要安装Ruby和SASS。
在idea中使用scss编译出css文件
L19541216的博客
05-28 1256
经过这两天的运用吧，我觉得在idea中用scss真的不如我在VScode中使用，体验感没有vscode好，再加上在idea中我还要提交项目，scss编译后的css文件又在scss的子目录（这个应该可以设置）。近来写项目多用idea，本人写样式超级依赖scss，没有它修改样式的时候很痛苦。ruby安装成功后，安装compass，命令行输入。安装过程中，一定要勾选这一项，其他直接next。检查是否安装成功，出现版本号，就是安装成功了。我的电脑是64位，安装的是下面这个。安装sass，命令行输入。
IntelliJ IDEA 配file watchers插件解决sass文件编译问题
weixin_34375233的博客
09-06 4405
2019独角兽企业重金招聘Python工程师标准>>> ...
intelliJ idea设置sass自动编译
Dolores_me的博客
06-21 3577
1.首先crtl+alt+s，在Plugins组件中搜索file watchers，如果没有就点击下面按钮“Install JetBrains plugins”，搜索“file watchers”安装并重启idea。 2.如果有file watchers组件，就在tools中点击此选项，点击右侧“+”，选择scss。 program：一般是c盘，ruby文件夹，\bin\sass....
scss/sass安装 intelliJ IDEA 2021.3
zhasodhaoudhowud的博客
07-25 1194
需要提前安装一些东西为scss准备， 首先需要安装Node.Js，https://nodejs.org/en/ 其次是在marketplace安装file watcher，类似vscode的--watch。不过安装配置之后，intelliJ是自动的。 接着回到settings里tools里找到file watcher 选出scss等等，在弹出来的界面点击添加，不需要其他的操作。 在回到programming界面，alt+F12，进入到terminal，界面输入 npm install-g .
详解vue-cli中配置sass
12-07
如何配置sass 一、安装对应依赖node模块： npm install node-sass --save-dev npm install sass-loader --save-dev 二、打开webpack.base.config.js在loaders里面加上 rules: [ { test: /\.vue$/, loader: '...
vue脚手架中配置Sass的方法
08-28
本篇文章主要介绍了vue脚手架中配置Sass的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack配置sass模块的加载的方法
08-29
本篇文章主要介绍了webpack加载sass配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
SASS安装文件&证书文件
09-30
SASS安装的安装文件，以及在安装过程中可能会遇到的需要安装证书
idea中npm安装总结与node-sass依赖安装等常见问题避坑总结
httpmc2018的博客
12-21 8714
首先安装npm：npm install 然后安装淘宝镜像：npm i -g cnpm --registry=https://registry.npm.taobao.org 安装Vue脚手架：vue-cli 安装webpack：cnpm install -g webpack 执行运行命令：npm run serve
Mac下使用IDEA如何安装less和sass并编译（局部/全局安装，IDEA自动编译）
ayangann915的博客
10-26 1361
这里我们是在一个项目下安装less，即局部less，因为先前安装全局less的时候出了一点小问题，所以这里给出在项目下安装less的过程。 在IEDA的终端输入：npm install less 这样就安装好了 接下来是编译less文件a.less，假设我们的less文件是在项目目录src的less目录下： 执行： ./node_mudules/.bin/lessc ./src/less/a...
phpstorm webstorm idea 安装 scss sass file watcher
09-04 2842
phpstorm webstorm idea 安装 scss sass 在使用 scss 之前，我们需要把开发环境搭好，这里介绍在 idea 系统软件中如何设置 scss 开发环境，就是让编辑器自动把 scss 文件编译成 css。 安装 node.js 我们所用的 scss 编译核心文件是 node.js 中的一个库，所以需要安装 node.js。 （node.js 是前端开发不可少的库，具体可...
JetBrains 系列开发工具，如何配置 `SCSS` `File Watcher` ，相关输出配置参数详解：webStorm phpStorm IDEA
05-09 1504
JetBrains 系统开发工具，如何配置 SCSS File Watcher ，相关输出配置参数详解：webStorm phpStorm IDEA 前言 你目前已经了解了如何使用 SCSS 进行开发，了解了该文章的内容：『 SCSS 日常用法 』 在 JetBrains 系列开发工具中通过 FileWatcher 进行编译的 SCSS 文件都是通过 sass 这个程序进行的。『 如何添加 FileWatcher 』 让我们来了解一下 sass 这个程序的相关参数。 一、避免输出窗口上下跳动 1. 情形 在
vue项目用npm安装sass包遇到的问题及解决办法
gzyes
12-25 79
IDEA启动vue程序，浏览器访问时出现如下情况的关于node-sass的错误： 错误1： Module build failed (from ./node_modules/sass-loader/dist/cjs.js) Error:Cannot find module 'node-sass' 错误2： Module build failed (from ./node_modules/sass...
git Can‘t update Couldn‘t check the working tree for unmerged files because of an error.unsafe repos
weixin_42220130的博客
05-16 1万+
IDEA更新代码的时候，Event Log报错 Can’t update Couldn’t check the working tree for unmerged files because of an error. unsafe repository (‘X:/xxx/xxx/xxx’ is owned by someone else) To add an exception for this directory, call: git config --global --add safe.directo
webpack配置sass
最新发布
10-27
然后在webpack配置文件中添加对sass文件的处理规则，例如： ``` module: { rules: [ { test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ] } ] } ``` 这个规则表示对所有以.scss结尾...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值