我有以下目录结构
src/
sass/
base.scss
global.scss
components/
Menu/
sass/
styles.scss
Contents/
sass/
style.scss
正如您所看到的,每个组件都有global
个样式和样式。我现在正在做的是当我编辑global
个样式然后我在全局样式文件夹上运行sass --watch sass:css
时。当我编辑任何组件样式时,我在该组件的sass文件夹上运行sass --watch sass:css
命令。
我需要运行sass --watch
命令,以便编译我正在编辑的所有scss文件。 如何使这项工作?
答案 0 :(得分:0)
首先我强烈建议使用Compass来编译scss文件。 使用它按照此链接中的步骤: Install Compass-style
安装后,在src文件夹中创建一个项目文件 的 config.rb 强> 之后转到src文件夹然后运行:
compass watch
它将编译所有scss文件
你可以指定很多设置 config.rb的内容看起来应该是这样的
require 'compass/import-once/activate'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "../wwwroot/css"
sass_dir = "./"
images_dir = "/wwwroot/images"
cache_path = "c:/tempscss"
您可以查看此链接以了解有关您可以配置的内容的更多信息 Compass Configuration
答案 1 :(得分:0)
你能考虑使用Gulp或Grunt等构建工具吗?它会让事情变得更容易。您可以使用通配符(例如'./src/sass/**/*.scss'
或['./src/components/scss/*.scss', './src/modules/**/*.scss']
gulp中的设置只是
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('styles', function() {
gulp.src('./src/sass/**/*.scss')
.pipe(gulp.dest('./dist/css/'))
});
gulp.task('watch',function() {
gulp.watch('./src/sass/**/*.scss', ['styles']);
});
仅限npm,它可能如下所示:
"scripts": {
"watch:sass": "onchange 'src/scss/**/*.scss' -- npm run sass:css",
}
在此处查找更多信息https://github.com/Qard/onchange