首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

无法让Sass编译器在app.sass所在目录之外的其他目录中输出

Sass编译器是一种流行的CSS预处理器,它可以提供更强大和灵活的CSS编写方式。在默认情况下,Sass编译器会将编译后的CSS文件输出到与源文件相同的目录中。然而,如果你希望将编译后的CSS文件输出到app.sass所在目录之外的其他目录中,你可以使用Sass编译器的一些配置选项来实现。

首先,你可以使用Sass编译器的--output选项来指定输出目录。例如,如果你希望将编译后的CSS文件输出到与app.sass同级的css目录中,你可以使用以下命令:

代码语言:txt
复制
sass --watch app.sass:css

这将监视app.sass文件的变化,并将编译后的CSS文件输出到css目录中。

另外,如果你希望将编译后的CSS文件输出到app.sass所在目录之外的任意目录,你可以使用绝对路径或相对路径来指定输出目录。例如,如果你希望将编译后的CSS文件输出到项目根目录下的output目录中,你可以使用以下命令:

代码语言:txt
复制
sass --watch app.sass:/path/to/project/output

或者,如果你希望将编译后的CSS文件输出到app.sass所在目录的上一级目录中,你可以使用以下命令:

代码语言:txt
复制
sass --watch app.sass:../output

这样,Sass编译器就会将编译后的CSS文件输出到指定的目录中。

总结起来,要让Sass编译器在app.sass所在目录之外的其他目录中输出,你可以使用Sass编译器的--output选项,并指定输出目录的路径。根据你的需求,可以使用绝对路径或相对路径来指定输出目录。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • HBuilderX介绍与语法提示

    目录 介绍 语法提示 代码助手 语法帮助 编辑器与项目管理器同步 多光标 列选择 着色高亮 文件快速打开 目录内搜索 缩进调整 语法校验 svn/git项目导入 预编译器(less/sass) sass...单击展开目录,单击预览文件,双击打开文件。 预览文件时顶部标签卡是斜体,此时继续预览其他文件会替换预览标签卡。双击文件后标签卡为正体,不会被替换。...取消同步后,如需手动定位标签卡所在项目,可以对编辑器点右键-“项目管理器定位”。...着色高亮 当你打开一个不认识文档时,即hx无法高亮着色,可以右下角选择使用其他编辑器打开。 当你打开一个文件编码错乱,产生乱码时,也可以右下角选择编码重新打开。...sass示例: (如下图示例) 预编译器安装后使用入口在外部命令菜单 sass/less插件配置小技巧: less、sass可以插件配置里,配置为保存文件时自动编译。

    3.2K40

    【webpack】从vue-cli 2x 到 3x 迁移与实践

    模块化开发,保留单个模块可维护性,又减少了http请求数,优化加载速度 2.什么是webpack webpack是前端打包工具,通过分析所在项目的目录结构,找到模块及各模块间依赖关系,且将浏览器不能直接运行语言如...webpack使用配置区别 3.webpack使用 3.1 vue脚手架webpack目录结构 左图项目结构为vue-cli 2x版本脚手架生成项目,build文件夹包含了webpack配置...entry - webpack 知道使用哪个模块,来作为构建其内部依赖图开始 output - webpack 知道在哪里输出它所创建 bundles,以及如何命名这些文件,默认值为 ..../ require 解析为 url,并将该文件输出输出目录 url-loader:用于将文件转换成 base64 uri webpack 加载程序 html-loader:将 HTML 导出为字符串..., 当编译器要求时,将 HTML 最小化 plugins - 通过插件引入来处理,用于转换某种类型模块,可以处理:打包、压缩、重新定义变量等 webpack官方文档链接

    84541

    Webpack5 快速入门

    webpack 处理样式资源 一、处理 css 资源 二、处理 less 资源 三、处理 scss 资源 四、处理 stylus 资源 7. webpack 处理图片资源 8. webpack 文件输出目录配置...,json 等资源,其他资源(vue,css,scss)需要借助相应 loader,Webpack 才能解析 四、plugins (插件) 扩展 Webpack 功能 五、mode (模式) 开发模式...(development)、生产模式 (production) 4. webpack 配置文件 ---- 创建配置文件,配置 entry 入口 项目根目录下新建文件: webpack.config.js.../src/main.js"}; output 输出 以下配置示例 output path 和 filename 是默认值 // nodejs 核心模块,专门用来处理路径问题const path .../src/main.js", // 相对路径    // 输出    output: {        // 输出路径        // __dirname 是 nodejs 变量,代表当前文件所在目录

    52010

    JNPF低代码开发平台移动端项目命令行打包H5改造

    # 可视化界面、vue-cli 命令行创建项目的区别 # 编译器区别 vue-cli 编译器安装在项目下 升级编译器需要执行 npm update 或者手动修改 package.json uni相关依赖版本后执行...npm install 需自己手动 npm 安装 less、scss、ts 等编译器 HBuilderX 插件管理界面安装无效 HBuilderX 编译器 HBuilderX 安装目录...plugin 目录,随着 HBuilderX 升级会自动升级编译器 vue-cli 创建项目迁移 HBuilderX 已经使用 cli 创建项目,想继续 HBuilderX 里使用,可以把工程拖到...如果是把整个项目拖入 HBuilderX,则编译时走是项目下编译器。 如果是把 src 目录拖入到 HBuilderX ,则走是 HBuilderX 安装目录下plugin 目录编译器。...其他开发工具无法发布 App 大概了解一下这些区别之后,下面就来讲讲具体改造步骤。 # uni-app 移动端项目改造步骤 # 1.

    1.2K30

    Gulp和Webpack对比

    : 主页html文件 |——package.json: npm包管理配置文件 实际开发过程src目录下工作,html、js和css等文件通过gulptask配置,执行合并和压缩后输出到...views目录下编写js(或css)文件逻辑代码,其中如果多个文件需要公共逻辑或者工具方法,就可以抽离出来util文件夹下创建对应公共方法,然后views需要js(或css)文件通过CommonJS...: __dirname + '/prd/',//本地服务器所加载页面所在目录 port:8089,//本地服务端口配置 colors: true,//终端输出结果为彩色...: __dirname,//本地服务器所加载页面所在目录 port:8089,//本地服务端口配置 colors: true,//终端输出结果为彩色...*,它实现原理就是,启动一个本地3000端口作为mock数据端口,然后我们Webpack配置一个代理,所有请求代理到3000端口上去,就可以获取到数据了。

    2.2K40

    webpack教程:如何从头开始设置 webpack 5

    基本配置 项目的根目录创建一个webpack.config.js。...要解决这个问题,只需项目的根目录创建一个.babelrc文件。可以使用preset-env和plugin-proposal-class-properties添加更多默认值。...Images 假设我们需要引用一张图片并直接导入到 JS 文件,这样是无法正常工作。 为了演示,创建 src/ images 并向其中添加图像,然后尝试将其导入到index.js文件。...我想使用这三种方法——Sass编写,PostCSS处理,以及编译到CSS。这需要引入一些加载器和依赖项。...postcss-preset-env node-sass 就像Babel一样,PostCSS 也需要一个配置文件 postcss.config.js,目录创建它,并输入以下内容: postcss.config.js

    2.2K10

    腾讯 IMWeb 团队前端构建秘籍

    之后我们可以dev工具中直接看到每个样式所在源文件位置,方便快速调试样式。...OCI编译系统OCI不需要额外插件支持,该系统本身已经可以通过配置实现部分目录缓存,二次利用能力,使用方法如下: 项目根目录添加.orange-cache.cache文件,并添加你需要缓存目录...webpack,能够被缓存内容有:loader处理结果、plugin处理结果、输出文件结果。下面详细说明不同资源不同阶段缓存方式。...于是就出现想通过postcss插件去兼容sass语法,虽然通过插件能够兼容部分语法,但是想要在已经有一定量业务代码,替换node-sass风险是非常高,本人亲自测试各种坑 当然也有其他途径解决这个问题...,不仅你使用完整sass语法,同时也免去各种安装node-sass问题,官方sass-loader其实已经提供了dart-sass解析模块支持具体参见文档,可能有人担心dart-sassjs

    1.5K30

    【学习笔记】尚硅谷Webpack5入门到原理 | 基础篇

    它会以一个或多个文件作为打包入口,将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出文件就是编译好文件,就可以浏览器段运行了。我们将lebpack输出文件叫做bundle 。...BableJavaScript 编译器。...主要用于将 ES6 语法编写代码转换为向后兼容 JavaScript 语法,以便能够运行在当前和旧版本浏览器或其他环境配置文件配置文件由很多种写法:babel.config.* :新建文件,位于项目根目录.../config/webpack.prod.js配置运行命令为了方便运行不同模式指令,我们将指令定义 package.json scripts 里面// package.json{ // 其他省略...⭐尚硅谷,天下有学不完知识!!!

    2.2K00

    【webpack】从vue-cli 2x 到 3x 迁移与实践

    模块化开发,保留单个模块可维护性,又减少了http请求数,优化加载速度 2.什么是webpack webpack是前端打包工具,通过分析所在项目的目录结构,找到模块及各模块间依赖关系,且将浏览器不能直接运行语言如...webpack使用配置区别 3.webpack使用 3.1 vue脚手架webpack目录结构 image.png 左图项目结构为vue-cli 2x版本脚手架生成项目,build文件夹包含了...entry - webpack 知道使用哪个模块,来作为构建其内部依赖图开始 output - webpack 知道在哪里输出它所创建 bundles,以及如何命名这些文件,默认值为 ..../ require 解析为 url,并将该文件输出输出目录 url-loader:用于将文件转换成 base64 uri webpack 加载程序 html-loader:将 HTML 导出为字符串..., 当编译器要求时,将 HTML 最小化 复制代码 plugins - 通过插件引入来处理,用于转换某种类型模块,可以处理:打包、压缩、重新定义变量等 webpack官方文档链接 ?

    1.1K30

    webpack@3简单使用

    filename: "bundle.js" // 打包后输出文件文件名 } } 现在我们可以开始使用 webpack 了,命令行输入 node_modules/.bin/...即将index.js和sum.js整合到了一个文件里,并输出到bundle.js 现在将 index.html 文件浏览器打开,应该也可以看到正确 log。...也可以使用npx webpack,npx帮你找本地目录webpack 用 babel-loader 把 ES6 转译为 ES5 Loader 是 webpack 一个很强大功能,这个功能可以你使用很多新技术...babel-loader 用于 webpack 知道如何运行 babel babel-core 可以看做编译器,这个库知道如何解析代码 babel-preset-env 这个库可以根据环境不同转换代码...发现css代码已经bundle.js.当打开首页html加载bundle.js时,jscss代码就会被当做字符串添加到html页面。 ? 这个项目的github 这个项目的github

    98060

    使用编译器

    solc不会读取文件系统位于重映射目标之外和显式指定源文件所在目录之外文件,因此import“/etc/ passwd”; 只有添加= /作为重新映射时才有效。...如果由于重映射而存在多个匹配,则选择具有最长公共前缀那个匹配。 出于安全原因,编译器限制了它可以访问目录。...命令行中指定源文件路径(及其子目录)和通过重映射定义路径可用于导入语句,但其他所有内容都被拒绝。...编译器API需要JSON格式输入,并以JSON格式输出输出编译结果。 评论当然是不允许,这里仅用于解释目的。...DocstringParsingError:无法分析注释块NatSpec标签。 SyntaxError:句法错误,例如continuefor循环之外使用。

    1.4K20

    前端工程化

    sass 安装 node-sass 正确姿势 官方github sass和scss关系:语法不同,sass语法更加简洁。 scss完全兼容css语法,他只是css上添加了一些更高级语法。...第一条指令如下,意思是编辑input.scss,并输出储存在output.css文件。指令只编译一次。...将js目录js文件转化成到lib目录下(ES6代码转为ES5代码) web应用目录规范 ? 工程化自动化过程 例如我们有这样工程目录。 ?...等等 这样,当你src目录修改代码,写代码时候,dist目录代码自动转换成可以上线代码。这就是自动化过程。 自动化过程就是使用命令行工具,把源代码翻译成发布代码。...git上传忽略node_modules 1、需要创建 .gitignore 文件文件夹, 右键选择Git Bash 进入命令行,进入项目所在目录

    1.3K30

    vue.config.js 配置文件

    vue.config.js 是一个可选配置文件,如果项目的 (和 package.json 同级) 根目录存在这个文件,那么它会被 @vue/cli-service 自动加载。...,检查出错误会触发编译失败 lintOnSave: true, // 使用带有浏览器内编译器完整构建版本,是否使用包含运行时编译器 Vue 构建版本 runtimeCompiler...用法和 webpack 本身 output.publicPath 一致,但是 Vue CLI 一些其他地方也需要用到这个值,所以请始终使用 publicPath 而不要直接修改 webpack ...如果你希望 lint 错误开发时直接显示浏览器,你可以使用 lintOnSave: 'default'。...,否则我们无法确定你是否希望将这些自定义配置应用到所有 CSS 文件

    2.8K00

    Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探

    其他小tips 一、Sass支持 要让ST支持Sass,第一步应该是支持Sass语法,Ctrl+Shift+P --> install --> Sass 安装Sass插件 ?...注意要将这里路径配好,设置成环境变量路径,插件可以在次寻找 babel或babel-core 命令,否则就会报错 Couldn't find babel or babel-core 然后,类似命令行执行...,命令自定义了路径与文件名,规则类似一般babel命令规则 SCSS文件下保存和JS文件下保存,触发build命令是不同 ?...*.js文件中保存,就会出现三个命令选项,选择name为two命令,即可输出two ?...关于sublimebuild system 就简单介绍到这儿了,更多还是去文档中心看看比较好 四、其他 顺带提一下,如果想在内网或离线环境下安装ST插件,就手动转移插件包即可 Windows一般系统这个路径下

    68820

    vue全局 CLI 配置——vue.config.js

    vue.config.js vue.config.js 是一个可选配置文件,如果项目的 (和 package.json 同级) 根目录存在这个文件,那么它会被 @vue/cli-service 自动加载...用法和 webpack 本身 output.publicPath 一致,但是 Vue CLI 一些其他地方也需要用到这个值,所以请始终使用 publicPath 而不要直接修改 webpack ...如果你希望 lint 错误开发时直接显示浏览器,你可以使用 lintOnSave: 'default'。...设置为 true 后你就可以 Vue 组件中使用 template 选项了,但是这会应用额外增加 10kb 左右。 更多细节可查阅:Runtime + Compiler vs....或者 false,否则我们无法确定你是否希望将这些自定义配置应用到所有 CSS 文件

    3K30

    boi剖析 - 基于webpackcss sprites实现方案

    从功能角度来讲比较单一,从实现角度来讲需要具备以下几点: 对style文件进行资源依赖分析,能够得出style引用图片资源; style文件引用图片并非都是图标,其他比如背景图等资源不应该被sprites...但是,代码书写标识,首先需要具体业务开发人员时刻注意不要遗漏;其次,这种模式实质上是对代码一种“绑架”,代码存在与业务无关内容并且可移植性不高。...配置postcss时,要注意以下几点: 使用less/sass等css预编译器时postcss执行时机问题; 通过路径进行图标文件合法性过滤; 以子目录名称和分辨率标识为基础sprites图片命名规则...下文将分别介绍boi针对上述问题具体解决方案。 4.1 与css预编译器综合使用 postcss并非只支持原始css语法,同时也支持less和sass等预编译语法。...进行资源依赖解析并编译到统一dest目录

    1.1K90
    领券