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 –