2
私の下線アンダースコアプロジェクトを構成するためのベストプラクティスを理解しようとしています。SASS - ページテンプレートの別のスタイルシートを出力する
私はnpmとgruntを使って基本的な作業環境を持っていて、メインのCSSをコンパイルしますが、サブフォルダに複数のページテンプレートを作成し、それぞれの.scssファイルを/ layoutフォルダに出力します// //
.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
を更新これはコードです：私は大体この順番で私のプロジェクトファイルを構造化function.php
でメインのスタイルシートの後の.cssとして独立したページテンプレートのスタイルシートをエンキューできること私は私の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をどのように構造化してレイアウトファイルに2つのページテンプレートscssを自動プレフィックスcssとして出力するのか理解できません。
Doeさんの実際のコードは何ですか？ – sab
今、私のstyle.scssが人間の読めるスタイルhuman.cssとコンパイルされたstyle.cssにコンパイルされ、コンパイルされたフォルダに置かれ、それらのファイルに対してautoprefixerが実行され、ルートに置かれます私のテーマファイルの –
私は基本的にそれをやり続けたいと思うし、また私の/ page-templateのscssファイルを取って手続きをやり直してそれらのファイルの接頭辞を付けて、最終的にそれらを/ページテンプレートフォルダに入れて、 functions.phpのmain main style.css –