Попытка понять наилучшую практику структурирования моего проекта подчеркивания подчеркивания.SASS - вывод отдельных таблиц стилей для шаблонов страниц
У меня есть базовая рабочая среда, использующая npm и grunt, и скомпилируйте мой основной css, но я хочу создать несколько шаблонов страниц в подпапке и вывести их соответствующий .scss-файл в папку/layout, чтобы что я могу епдиеий отдельные таблицы стилей шаблона страницы как .css после основной таблицы стилей в function.php
я структурирован мои файлы проект примерно в такой последовательности: // обновляется //
.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 в папке макета.
Доменился ли ваш реальный код? – sab
Прямо сейчас он принимает мой style.scss и компилирует его в обычный человекообразный стиль human.css и миниатюрный стиль.css и помещает их в/скомпилированную папку, а затем запускает autoprefixer в этих файлах и помещает их в корневой каталог моего файла темы. –
Я в основном хочу, чтобы он продолжал это делать, а также забирал файлы scss-файла/шаблона страницы и повторял процедуру, которая компилирует и префикс этих файлов и в конце ставит их в папку шаблонов/страниц, чтобы я мог их выложить в очередь после моего main main.css в functions.php –