2
试图了解构建我的sass下划线项目的最佳实践。SASS - 为页面模板输出单独的样式表
我有一个使用npm和grunt的基本工作环境，并获得我的主css编译，但我想创建多个页面模板在一个子文件夹中，并将其各自的.scss文件输出在/ layout文件夹中我可以在function.php
主要样式表后排队单独的页面模板样式表作为我的CSS结构大致的顺序我的项目文件：// //更新
.gitignore
404.php
archive.php
comments.php
/compiled
style-human.css // Readable CSS Before prefixing //
style.css // Minified CSS Before Prefixing //
/page-layouts
page-frontage.human.css // Readable page-template CSS before prefixing //
page-frontage.css // minified page-template CSS before prefixing //
/fonts
footer.php
functions.php
gruntfile.js
header.php
/inc
index.php
/js
/languages
/node_modules
package.json
/page-layouts
page-frontage.css // prefixed minified CSS to be Enqueued after main style.css in functions.php //
page-frontage-human.css // prefixed readable CSS //
/page-templates
page-frontpage.php
page.php
rtl.css
/sass
_normalize.scss
/elements
/forms
/layout
_footer
_header
/page-layouts
_page-frontpage.scss
/media
/mixins
/modules
/navigation
/site
style.css // @imports everything SCSS except page-layouts //
/variables-site
search.php
sidebar.php
single.php
style-human.css // readable main stylesheet //
style.css // minified main stylesheet Enqueued in functions.php //
/template-parts
这是代码我用在我的gruntfile.js中
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
/**
* sass task
*/
sass: {
dev: {
options: {
style: 'expanded',
sourcemap: 'none',
},
files: {
'compiled/style-human.css': 'sass/style.scss'
}
},
dist: {
options: {
style: 'compressed',
sourcemap: 'none',
},
files: {
'compiled/style.css': 'sass/style.scss'
}
}
},
/**
* Autoprefixer
*/
autoprefixer: {
options: {
browsers: ['last 2 versions']
},
// prefix all files //
multiple_files: {
expand: true,
flatten: true,
src: 'compiled/*.css',
dest: ''
}
},
/**
* Watch task
*/
watch: {
css: {
files: '**/*scss',
tasks: ['sass','autoprefixer']
}
}
});
grunt.loadNpmTasks ('grunt-contrib-sass');
grunt.loadNpmTasks ('grunt-contrib-watch');
grunt.loadNpmTasks ('grunt-autoprefixer');
grunt.registerTask('default',['watch']);
}
现在我已经尝试了几种不同的解决方案，但我无处可去了解如何构建我的gruntfile.js，以便它在布局文件夹中输出我的两个页面模板scss作为自动前缀CSS。
Doe的你的实际代码做什么？ – sab
现在它需要我的style.scss并将其编译为常规的人类可读样式-human.css和缩小的style.css，并将它们放到/编译的文件夹中，然后在这些文件上运行autoprefixer并将它们放入根我的主题文件。 –
我基本上希望它继续这样做，并采取我/页面模板scss文件，并重复编制和前缀这些文件的过程，并最终把它们放入一个/页面模板文件夹，以便我可以排队后我main主要style.css在functions.php –