Zenn
Closed5

11ty（v1.0.0）にSassの導入とコンパイルしたcssファイル変更と監視ができるようにする

Sass
Eleventy
11ty
warugakiwarugaki

npm scriptsの追加と変更

package.json
"scripts": {
  "watch:sass": "sass -w src/sass:dist/css/",
  "build:sass": "sass src/sass:dist/css/",
  "watch:eleventy": "npx @11ty/eleventy --serve",
  "build:eleventy": "npx @11ty/eleventy",
  "start": "npm-run-all build:sass -p watch:*",
  "build": "npm-run-all build:*"
},
warugakiwarugaki

scssファイルの作成

src/sass/style.scss
body {
  font-family: sans-serif;
  color: #fff;
  background: #000;
}
warugakiwarugaki

11tyの構成ファイル

  • 11tyに独自のウォッチターゲットを追加する
  • 11tyに出力フォルダーにコピーするように
.eleventy.js
module.exports = function(eleventyConfig) {
  
  // https://www.11ty.dev/docs/watch-serve/#add-your-own-watch-targets
  eleventyConfig.addWatchTarget("./src/scss/");
  // https://www.11ty.dev/docs/copy/#passthrough-file-copy
  eleventyConfig.addPassthroughCopy("./src/css");
  
  // https://www.11ty.dev/docs/config/
  return {
    dir: {
      input: "src",
      output: "dist"
    }
  }
};
warugakiwarugaki

Browsersync（開発サーバー）の設定

Browsersyncサーバーオプションを上書設定しないと
scssファイルの変更後のホットリロードがきかない

追加する設定

  eleventyConfig.setBrowserSyncConfig({
    files: "dist/css/**/*.css"
  });

追加後の11ty構成ファイル

.eleventy.js
module.exports = function(eleventyConfig) {
  
  // https://www.11ty.dev/docs/watch-serve/#add-your-own-watch-targets
  eleventyConfig.addWatchTarget("./src/scss/");
  // https://www.11ty.dev/docs/copy/#passthrough-file-copy
  eleventyConfig.addPassthroughCopy("./src/css");
  
  eleventyConfig.setBrowserSyncConfig({
    files: "dist/css/**/*.css"
  });
  
  // https://www.11ty.dev/docs/config/
  return {
    dir: {
      input: "src",
      output: "dist"
    }
  }
};
このスクラップは2022/03/21にクローズされました