npm パッケージのインストール

npm i -D sass npm-run-all

warugaki

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:*"
},

warugaki

scssファイルの作成

src/sass/style.scss

body {
  font-family: sans-serif;
  color: #fff;
  background: #000;
}

warugaki

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"
    }
  }
};

warugaki

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"
    }
  }
};