{"id":1576,"date":"2025-03-24T08:50:21","date_gmt":"2025-03-23T23:50:21","guid":{"rendered":"https:\/\/dexall.co.jp\/articles\/?p=1576"},"modified":"2025-03-24T08:50:21","modified_gmt":"2025-03-23T23:50:21","slug":"%e3%80%90%e4%bf%9d%e5%ad%98%e7%89%88%e3%80%91sass-loader%e3%81%ae%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9a%e8%a8%ad%e5%ae%9a%e3%81%8b%e3%82%89%e3%83%88%e3%83%a9%e3%83%96%e3%83%ab%e3%82%b7","status":"publish","type":"post","link":"https:\/\/dexall.co.jp\/articles\/?p=1576","title":{"rendered":"\u3010\u4fdd\u5b58\u7248\u3011sass-loader\u306e\u5b8c\u5168\u30ac\u30a4\u30c9\uff1a\u8a2d\u5b9a\u304b\u3089\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u307e\u30675\u3064\u306e\u5b9f\u8df5\u30c6\u30af\u30cb\u30c3\u30af"},"content":{"rendered":"\n<div class=\"toc\"><br \/>\n<b>Warning<\/b>:  Undefined array key \"is_admin\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>116<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_category_top\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>121<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_top\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>128<\/b><br \/>\n    <div id=\"toc_container\" class=\"sgb-toc--bullets js-smooth-scroll\" data-dialog-title=\"\u76ee\u6b21\">\n      <p class=\"toc_title\">\u76ee\u6b21 <\/p>\n      <ul class=\"toc_list\">  <li class=\"first\">    <a href=\"#i-0\">sass-loader \u3068\u306f\uff1aWebpack \u3067\u306e\u30b9\u30bf\u30a4\u30eb\u51e6\u7406\u306e\u8981<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-1\">sass-loader \u304c\u89e3\u6c7a\u3059\u308b3\u3064\u306e\u958b\u767a\u8ab2\u984c<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-2\">Webpack\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0\u306b\u304a\u3051\u308b\u4f4d\u7f6e\u3065\u3051<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-3\">\u958b\u767a\u74b0\u5883\u3078\u306esass-loader\u5c0e\u5165\u624b\u9806<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-4\">\u5fc5\u8981\u306a\u4f9d\u5b58\u95a2\u4fc2\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-5\">webpack.config.js\u3067\u306e\u57fa\u672c\u8a2d\u5b9a<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-6\">\u5b9f\u8df5\u7684\u306a sass-loader \u8a2d\u5b9a\u30c6\u30af\u30cb\u30c3\u30af<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-7\">\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u8a2d\u5b9a\u306b\u3088\u308b\u958b\u767a\u52b9\u7387\u306e\u5411\u4e0a<\/a>      <\/li>      <li>        <a href=\"#i-8\">\u672c\u756a\u74b0\u5883\u3067\u306e\u6700\u9069\u5316\u8a2d\u5b9a<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-9\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u8003\u616e\u3057\u305f\u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u7565<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-10\">sass-loader\u306e\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u30ac\u30a4\u30c9\u5b8c\u5168<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-11\">\u3088\u304f\u3042\u308b\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u3068\u305d\u306e\u89e3\u6c7a\u65b9\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-12\">\u30d0\u30fc\u30b8\u30e7\u30f3\u4e92\u63db\u6027\u306e\u554f\u984c\u3068\u5bfe\u51e6\u6cd5<\/a>      <\/li>    <\/ul>  <\/li>  <li class=\"last\">    <a href=\"#i-13\">sass-loader\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3068\u5fdc\u7528\u30c6\u30af\u30cb\u30c3\u30af<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-14\">\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u3068\u30df\u30c3\u30af\u30b9\u30a4\u30f3\u306e\u52b9\u7387\u7684\u306a\u5229\u7528<\/a>      <\/li>      <li>        <a href=\"#i-15\">\u30e2\u30b8\u30e5\u30fc\u30eb\u5206\u5272\u306b\u3088\u308b\u4fdd\u5b88\u6027\u306e\u5411\u4e0a<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-16\">CI\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3067\u306e\u6700\u9069\u306a\u8a2d\u5b9a\u65b9\u6cd5<\/a>      <\/li>    <\/ul>  <\/li><\/ul>\n      <a href=\"#\" class=\"sgb-toc-button js-toc-button\" rel=\"nofollow\" data-open-dialog=\"true\"><i class=\"fa fa-list\"><\/i><span class=\"sgb-toc-button__text\">\u76ee\u6b21\u3078<\/span><\/a>\n    <\/div><\/div><h2 class=\"wp-block-heading\" id=\"i-0\">sass-loader \u3068\u306f\uff1aWebpack \u3067\u306e\u30b9\u30bf\u30a4\u30eb\u51e6\u7406\u306e\u8981<\/h2>\n\n\n\n<p>\u30e2\u30c0\u30f3\u306aWeb\u958b\u767a\u306b\u304a\u3044\u3066\u3001Sass\u3084SCSS\u306f\u6b20\u304b\u305b\u306a\u3044CSS\u30d7\u30ea\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u3057\u304b\u3057\u3001\u3053\u308c\u3089\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u76f4\u63a5\u30d6\u30e9\u30a6\u30b6\u3067\u5b9f\u884c\u3059\u308b\u3053\u3068\u306f\u3067\u304d\u307e\u305b\u3093\u3002\u3053\u3053\u3067\u91cd\u8981\u306a\u5f79\u5272\u3092\u679c\u305f\u3059\u306e\u304c<code>sass-loader<\/code>\u3067\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-1\">sass-loader \u304c\u89e3\u6c7a\u3059\u308b3\u3064\u306e\u958b\u767a\u8ab2\u984c<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>CSS\u958b\u767a\u306e\u751f\u7523\u6027\u5411\u4e0a<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5909\u6570\u3084\u30df\u30c3\u30af\u30b9\u30a4\u30f3\u306a\u3069\u306eSass\u6a5f\u80fd\u3092\u4f7f\u7528\u53ef\u80fd\u306b<\/li>\n\n\n\n<li>\u30cd\u30b9\u30c8\u3055\u308c\u305f\u30bb\u30ec\u30af\u30bf\u306b\u3088\u308b\u53ef\u8aad\u6027\u306e\u5411\u4e0a<\/li>\n\n\n\n<li>\u30e2\u30b8\u30e5\u30fc\u30eb\u5206\u5272\u306b\u3088\u308b\u4fdd\u5b88\u6027\u306e\u78ba\u4fdd<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ webpack.config.js\u306e\u57fa\u672c\u8a2d\u5b9a\u4f8b\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: \/\\.scss$\/,  \/\/ Sass\u30d5\u30a1\u30a4\u30eb\u3092\u691c\u77e5\n        use: [\n          'style-loader',  \/\/ CSS\u3092DOM\u306b\u6ce8\u5165\n          'css-loader',    \/\/ CSS\u3092CommonJS\u306b\u5909\u63db\n          'sass-loader'    \/\/ Sass\u3092CSS\u306b\u5909\u63db\n        ]\n      }\n    ]\n  }\n};<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30a2\u30bb\u30c3\u30c8\u7ba1\u7406\u306e\u81ea\u52d5\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sass\u30d5\u30a1\u30a4\u30eb\u306e\u81ea\u52d5\u30b3\u30f3\u30d1\u30a4\u30eb<\/li>\n\n\n\n<li>\u4f9d\u5b58\u95a2\u4fc2\u306e\u81ea\u52d5\u89e3\u6c7a<\/li>\n\n\n\n<li>\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u306e\u751f\u6210\u306b\u3088\u308b\u958b\u767a\u52b9\u7387\u5411\u4e0a<\/li>\n<\/ul>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u6700\u9069\u5316\u3068\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CSS\u306e\u6700\u5c0f\u5316\u3068\u5727\u7e2e<\/li>\n\n\n\n<li>\u4e0d\u8981\u306a\u30b9\u30bf\u30a4\u30eb\u306e\u524a\u9664<\/li>\n\n\n\n<li>\u30ad\u30e3\u30c3\u30b7\u30e5\u6a5f\u80fd\u306b\u3088\u308b\u518d\u30d3\u30eb\u30c9\u306e\u9ad8\u901f\u5316<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-2\">Webpack\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0\u306b\u304a\u3051\u308b\u4f4d\u7f6e\u3065\u3051<\/h3>\n\n\n\n<p>sass-loader\u306f\u3001Webpack\u306e\u30ed\u30fc\u30c0\u30fc\u30c1\u30a7\u30fc\u30f3\u306e\u91cd\u8981\u306a\u4e00\u90e8\u3092\u62c5\u3063\u3066\u3044\u307e\u3059\u3002\u5177\u4f53\u7684\u306b\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u51e6\u7406\u30d5\u30ed\u30fc\u3067\u6a5f\u80fd\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d7\u30ea\u30d7\u30ed\u30bb\u30b9\u6bb5\u968e<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ Sass\u30d5\u30a1\u30a4\u30eb\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\u4f8b\n   @import 'variables';\n   @import 'mixins';\n\n   .container {\n     @include flex-center;  \/\/ \u30df\u30c3\u30af\u30b9\u30a4\u30f3\u306e\u4f7f\u7528\n     background: $primary-color;  \/\/ \u5909\u6570\u306e\u4f7f\u7528\n   }<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u5909\u63db\u30d7\u30ed\u30bb\u30b9<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sass\u30d5\u30a1\u30a4\u30eb \u2192 CSS \u2192 JavaScript Module \u2192 DOM\u306e\u9806\u3067\u51e6\u7406<\/li>\n\n\n\n<li>\u5404\u6bb5\u968e\u3067\u6700\u9069\u5316\u3068\u30a8\u30e9\u30fc\u30c1\u30a7\u30c3\u30af\u3092\u5b9f\u884c<\/li>\n<\/ul>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u9023\u643a\u6a5f\u80fd<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ \u9ad8\u5ea6\u306a\u8a2d\u5b9a\u4f8b\n   {\n     loader: 'sass-loader',\n     options: {\n       sassOptions: {\n         includePaths: ['src\/styles'],  \/\/ \u30a4\u30f3\u30dd\u30fc\u30c8\u30d1\u30b9\u306e\u8a2d\u5b9a\n         outputStyle: 'compressed'       \/\/ \u51fa\u529b\u30b9\u30bf\u30a4\u30eb\u306e\u6307\u5b9a\n       },\n       sourceMap: true  \/\/ \u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u306e\u6709\u52b9\u5316\n     }\n   }<\/pre>\n\n\n\n<p>sass-loader\u306e\u5c0e\u5165\u306b\u3088\u308a\u3001\u30e2\u30c0\u30f3\u306a\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u306b\u304a\u3051\u308b\u4ee5\u4e0b\u306e\u8981\u4ef6\u3092\u6e80\u305f\u3059\u3053\u3068\u304c\u3067\u304d\u307e\u3059\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u52b9\u7387\u306e\u5411\u4e0a<\/strong>\uff1aSass\u306e\u5f37\u529b\u306a\u6a5f\u80fd\u3092Webpack\u30d3\u30eb\u30c9\u30d7\u30ed\u30bb\u30b9\u306b\u7d71\u5408<\/li>\n\n\n\n<li><strong>\u4fdd\u5b88\u6027\u306e\u78ba\u4fdd<\/strong>\uff1a\u30e2\u30b8\u30e5\u30fc\u30eb\u5316\u3055\u308c\u305f\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u306e\u7ba1\u7406<\/li>\n\n\n\n<li><strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316<\/strong>\uff1a\u30d3\u30eb\u30c9\u6642\u306e\u6700\u9069\u5316\u6a5f\u80fd\u306e\u6d3b\u7528<\/li>\n<\/ul>\n\n\n\n<p>\u307e\u305f\u3001sass-loader\u306fPostCSS\u3084Autoprefixer\u306a\u3069\u306e\u4ed6\u306e\u30c4\u30fc\u30eb\u3068\u3082\u5186\u6ed1\u306b\u9023\u643a\u3057\u3001\u3088\u308a\u5f37\u529b\u306a\u30b9\u30bf\u30a4\u30eb\u51e6\u7406\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3092\u69cb\u7bc9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-3\">\u958b\u767a\u74b0\u5883\u3078\u306esass-loader\u5c0e\u5165\u624b\u9806<\/h2>\n\n\n\n<p>Webpack\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306bsass-loader\u3092\u5c0e\u5165\u3059\u308b\u624b\u9806\u3092\u3001\u74b0\u5883\u69cb\u7bc9\u304b\u3089\u57fa\u672c\u8a2d\u5b9a\u307e\u3067\u8a73\u3057\u304f\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-4\">\u5fc5\u8981\u306a\u4f9d\u5b58\u95a2\u4fc2\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u524d\u63d0\u6761\u4ef6\u306e\u78ba\u8a8d<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   # Node.js\u3068npm\u304c\u5fc5\u8981\u3067\u3059\n   node --version  # v14.0.0\u4ee5\u4e0a\u63a8\u5968\n   npm --version   # v6.0.0\u4ee5\u4e0a\u63a8\u5968<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u5fc5\u8981\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   # \u57fa\u672c\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\n   npm install --save-dev webpack webpack-cli\n\n   # sass-loader\u95a2\u9023\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\n   npm install --save-dev sass-loader sass css-loader style-loader<\/pre>\n\n\n\n<p>\u5404\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u5f79\u5272\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>sass-loader<\/code>: Sass\/SCSS\u30d5\u30a1\u30a4\u30eb\u3092CSS\u306b\u5909\u63db<\/li>\n\n\n\n<li><code>sass<\/code>: Sass\u30b3\u30f3\u30d1\u30a4\u30e9\u306eNode.js\u5b9f\u88c5\uff08dart-sass\uff09<\/li>\n\n\n\n<li><code>css-loader<\/code>: CSS\u3092CommonJS\u30e2\u30b8\u30e5\u30fc\u30eb\u306b\u5909\u63db<\/li>\n\n\n\n<li><code>style-loader<\/code>: CSS\u3092DOM\u306b\u6ce8\u5165<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-5\">webpack.config.js\u3067\u306e\u57fa\u672c\u8a2d\u5b9a<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u57fa\u672c\u7684\u306a\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306e\u4f5c\u6210<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ webpack.config.js\nconst path = require('path');\n\nmodule.exports = {\n  entry: '.\/src\/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js',\n  },\n  module: {\n    rules: [\n      {\n        test: \/\\.s[ac]ss$\/i,  \/\/ .sass\u3068.scss\u306e\u4e21\u65b9\u306b\u5bfe\u5fdc\n        use: [\n          \/\/ \u9806\u5e8f\u304c\u91cd\u8981\uff1a\u4e0b\u304b\u3089\u4e0a\u306b\u5b9f\u884c\u3055\u308c\u308b\n          'style-loader',  \/\/ \u30b9\u30bf\u30a4\u30eb\u3092DOM\u306b\u6ce8\u5165\n          'css-loader',    \/\/ CSS\u3092JavaScript\u306b\u5909\u63db\n          {\n            loader: 'sass-loader',\n            options: {\n              \/\/ Sass\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\n              sassOptions: {\n                outputStyle: 'expanded',\n              },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u69cb\u9020\u306e\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">my-project\/\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 webpack.config.js\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 index.js\n\u2502   \u251c\u2500\u2500 styles\/\n\u2502   \u2502   \u251c\u2500\u2500 main.scss\n\u2502   \u2502   \u2514\u2500\u2500 _variables.scss\n\u2514\u2500\u2500 dist\/<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>Sass\u30d5\u30a1\u30a4\u30eb\u306e\u4f5c\u6210\u3068\u4f7f\u7528<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ src\/styles\/_variables.scss\n$primary-color: #3498db;\n$secondary-color: #2ecc71;\n\n\/\/ src\/styles\/main.scss\n@import 'variables';\n\n.container {\n  background-color: $primary-color;\n  padding: 20px;\n\n  h1 {\n    color: $secondary-color;\n  }\n}<\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><strong>JavaScript\u304b\u3089\u306e\u30a4\u30f3\u30dd\u30fc\u30c8<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ src\/index.js\nimport '.\/styles\/main.scss';\n\nconsole.log('Styles loaded successfully!');<\/pre>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li><strong>\u52d5\u4f5c\u78ba\u8a8d\u306e\u65b9\u6cd5<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># \u958b\u767a\u30b5\u30fc\u30d0\u30fc\u306e\u8d77\u52d5\uff08webpack-dev-server\u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\uff09\nnpm install --save-dev webpack-dev-server\nnpm run dev\n\n# \u307e\u305f\u306f\u3001\u30d3\u30eb\u30c9\u306e\u5b9f\u884c\nnpm run build<\/pre>\n\n\n\n<p>\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u5b8c\u4e86\u5f8c\u306e\u78ba\u8a8d\u30dd\u30a4\u30f3\u30c8\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sass\u30d5\u30a1\u30a4\u30eb\u304c\u6b63\u3057\u304f\u30b3\u30f3\u30d1\u30a4\u30eb\u3055\u308c\u3066\u3044\u308b\u304b<\/li>\n\n\n\n<li>\u30b9\u30bf\u30a4\u30eb\u304c\u30da\u30fc\u30b8\u306b\u9069\u7528\u3055\u308c\u3066\u3044\u308b\u304b<\/li>\n\n\n\n<li>\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u304c\u6b63\u5e38\u306b\u751f\u6210\u3055\u308c\u3066\u3044\u308b\u304b<\/li>\n\n\n\n<li>\u30d3\u30eb\u30c9\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u3066\u3044\u306a\u3044\u304b<\/li>\n<\/ul>\n\n\n\n<p>\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u4e92\u63db\u6027\u306e\u78ba\u8a8d<\/li>\n\n\n\n<li>\u30ed\u30fc\u30c0\u30fc\u306e\u9806\u5e8f\u304c\u6b63\u3057\u3044\u304b\u78ba\u8a8d<\/li>\n\n\n\n<li>\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306e\u30b7\u30f3\u30bf\u30c3\u30af\u30b9\u30a8\u30e9\u30fc\u306e\u30c1\u30a7\u30c3\u30af<\/li>\n\n\n\n<li>node_modules\u306e\u518d\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/li>\n<\/ol>\n\n\n\n<p>\u3053\u306e\u57fa\u672c\u8a2d\u5b9a\u3092\u571f\u53f0\u3068\u3057\u3066\u3001\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u8aac\u660e\u3059\u308b\u9ad8\u5ea6\u306a\u8a2d\u5b9a\u3084\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3092\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-6\">\u5b9f\u8df5\u7684\u306a sass-loader \u8a2d\u5b9a\u30c6\u30af\u30cb\u30c3\u30af<\/h2>\n\n\n\n<p>sass-loader\u306e\u6a5f\u80fd\u3092\u6700\u5927\u9650\u306b\u6d3b\u7528\u3057\u3001\u958b\u767a\u52b9\u7387\u3068\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u308b\u305f\u3081\u306e\u5b9f\u8df5\u7684\u306a\u8a2d\u5b9a\u30c6\u30af\u30cb\u30c3\u30af\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-7\">\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u8a2d\u5b9a\u306b\u3088\u308b\u958b\u767a\u52b9\u7387\u306e\u5411\u4e0a<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u8a73\u7d30\u306a\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u306e\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ webpack.config.js\nmodule.exports = {\n  \/\/ ...\n  devtool: 'source-map',  \/\/ \u672c\u756a\u74b0\u5883\u3067\u306f 'hidden-source-map' \u3092\u63a8\u5968\n  module: {\n    rules: [\n      {\n        test: \/\\.scss$\/,\n        use: [\n          'style-loader',\n          {\n            loader: 'css-loader',\n            options: {\n              sourceMap: true,\n              importLoaders: 2\n            }\n          },\n          {\n            loader: 'sass-loader',\n            options: {\n              sourceMap: true,\n              sassOptions: {\n                outputStyle: 'expanded'\n              }\n            }\n          }\n        ]\n      }\n    ]\n  }\n};<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u6642\u306e\u30c7\u30d0\u30c3\u30b0\u52b9\u7387\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u958b\u767a\u74b0\u5883\u56fa\u6709\u306e\u8a2d\u5b9a\nconst devConfig = {\n  stats: {\n    children: false,  \/\/ \u5b50\u30b3\u30f3\u30d1\u30a4\u30e9\u306e\u51fa\u529b\u3092\u6291\u5236\n    colors: true      \/\/ \u30b3\u30f3\u30bd\u30fc\u30eb\u51fa\u529b\u3092\u30ab\u30e9\u30fc\u5316\n  },\n  infrastructureLogging: {\n    level: 'warning'  \/\/ \u30ed\u30b0\u30ec\u30d9\u30eb\u306e\u8a2d\u5b9a\n  }\n};<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-8\">\u672c\u756a\u74b0\u5883\u3067\u306e\u6700\u9069\u5316\u8a2d\u5b9a<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>CSS\u6700\u5c0f\u5316\u306e\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst CssMinimizerPlugin = require('css-minimizer-webpack-plugin');\n\nmodule.exports = {\n  \/\/ ...\n  module: {\n    rules: [\n      {\n        test: \/\\.scss$\/,\n        use: [\n          MiniCssExtractPlugin.loader,  \/\/ style-loader\u306e\u4ee3\u308f\u308a\u306b\u4f7f\u7528\n          'css-loader',\n          {\n            loader: 'sass-loader',\n            options: {\n              sassOptions: {\n                outputStyle: 'compressed'\n              }\n            }\n          }\n        ]\n      }\n    ]\n  },\n  optimization: {\n    minimizer: [\n      new CssMinimizerPlugin({\n        minimizerOptions: {\n          preset: [\n            'default',\n            {\n              discardComments: { removeAll: true },\n              normalizeWhitespace: true\n            }\n          ]\n        }\n      })\n    ]\n  },\n  plugins: [\n    new MiniCssExtractPlugin({\n      filename: '[name].[contenthash].css'\n    })\n  ]\n};<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u6761\u4ef6\u4ed8\u304d\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u74b0\u5883\u306b\u5fdc\u3058\u305f\u8a2d\u5b9a\u306e\u5207\u308a\u66ff\u3048\nconst getStyleLoaders = (isDevelopment) =&gt; [\n  isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,\n  {\n    loader: 'css-loader',\n    options: {\n      modules: {\n        localIdentName: isDevelopment \n          ? '[name]__[local]__[hash:base64:5]'\n          : '[hash:base64]'\n      }\n    }\n  },\n  'sass-loader'\n];<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-9\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u8003\u616e\u3057\u305f\u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u7565<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30ed\u30fc\u30c0\u30fc\u30ec\u30d9\u30eb\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">module.exports = {\n  module: {\n    rules: [\n      {\n        test: \/\\.scss$\/,\n        use: [\n          'style-loader',\n          'css-loader',\n          {\n            loader: 'sass-loader',\n            options: {\n              implementation: require('sass'),\n              sassOptions: {\n                fiber: require('fibers'),  \/\/ \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u5411\u4e0a\n              },\n              \/\/ \u30ad\u30e3\u30c3\u30b7\u30e5\u8a2d\u5b9a\n              webpackImporter: true,\n              additionalData: `$env: '${process.env.NODE_ENV}';`\n            }\n          }\n        ]\n      }\n    ]\n  },\n  cache: {\n    type: 'filesystem',\n    buildDependencies: {\n      config: [__filename]  \/\/ \u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306e\u5909\u66f4\u3092\u76e3\u8996\n    }\n  }\n};<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30ea\u30bd\u30fc\u30b9\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u6700\u9069\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const path = require('path');\n\nmodule.exports = {\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: '[name].[contenthash].js',\n    clean: true  \/\/ \u30d3\u30eb\u30c9\u6642\u306bdist\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u30af\u30ea\u30fc\u30f3\n  },\n  optimization: {\n    moduleIds: 'deterministic',\n    runtimeChunk: 'single',\n    splitChunks: {\n      cacheGroups: {\n        styles: {\n          name: 'styles',\n          test: \/\\.s?css$\/,\n          chunks: 'all',\n          enforce: true\n        }\n      }\n    }\n  }\n};<\/pre>\n\n\n\n<p>\u5b9f\u88c5\u306e\u30dd\u30a4\u30f3\u30c8\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u52b9\u7387\u306e\u6700\u9069\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u3092\u9069\u5207\u306b\u8a2d\u5b9a\u3057\u3001\u30c7\u30d0\u30c3\u30b0\u3092\u5bb9\u6613\u306b<\/li>\n\n\n\n<li>\u958b\u767a\u74b0\u5883\u3067\u306f\u8a73\u7d30\u306a\u30ed\u30b0\u3092\u3001\u672c\u756a\u74b0\u5883\u3067\u306f\u5fc5\u8981\u6700\u5c0f\u9650\u306b<\/li>\n\n\n\n<li>HMR\uff08Hot Module Replacement\uff09\u306e\u6d3b\u7528<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d3\u30eb\u30c9\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u5411\u4e0a<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30ad\u30e3\u30c3\u30b7\u30e5\u6a5f\u80fd\u306e\u6d3b\u7528<\/li>\n\n\n\n<li>\u4e0d\u8981\u306a\u30ed\u30fc\u30c0\u30fc\u51e6\u7406\u306e\u7701\u7565<\/li>\n\n\n\n<li>parallel-webpack \u306e\u4f7f\u7528\u691c\u8a0e<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u672c\u756a\u74b0\u5883\u3067\u306e\u6700\u9069\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CSS\u306e\u62bd\u51fa\u3068\u6700\u5c0f\u5316<\/li>\n\n\n\n<li>\u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u7565\u306e\u5b9f\u88c5<\/li>\n\n\n\n<li>\u30b3\u30fc\u30c9\u5206\u5272\u306e\u9069\u7528<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u8a2d\u5b9a\u3092\u9069\u5207\u306b\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u958b\u767a\u52b9\u7387\u3068\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u4e21\u7acb\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-10\">sass-loader\u306e\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u30ac\u30a4\u30c9\u5b8c\u5168<\/h2>\n\n\n\n<p>sass-loader\u3092\u4f7f\u7528\u3059\u308b\u969b\u306b\u906d\u9047\u3059\u308b\u53ef\u80fd\u6027\u306e\u3042\u308b\u4e3b\u8981\u306a\u554f\u984c\u3068\u305d\u306e\u89e3\u6c7a\u65b9\u6cd5\u3092\u8a73\u3057\u304f\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-11\">\u3088\u304f\u3042\u308b\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u3068\u305d\u306e\u89e3\u6c7a\u65b9\u6cd5<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>ModuleNotFoundError: Module not found: Error: Can\u2019t resolve \u2018sass-loader\u2019<\/strong><\/li>\n<\/ol>\n\n\n\n<p>\u539f\u56e0\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>sass-loader\u30d1\u30c3\u30b1\u30fc\u30b8\u304c\u672a\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/li>\n\n\n\n<li>node_modules\u306e\u7834\u640d<\/li>\n<\/ul>\n\n\n\n<p>\u89e3\u6c7a\u65b9\u6cd5\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># \u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u518d\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\nnpm uninstall sass-loader sass\nnpm install --save-dev sass-loader sass\n\n# node_modules\u306e\u518d\u69cb\u7bc9\nrm -rf node_modules package-lock.json\nnpm install<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>Error: Node Sass version 6.0.0 is incompatible with ^4.0.0<\/strong><\/li>\n<\/ol>\n\n\n\n<p>\u539f\u56e0\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>sass-loader\u3068node-sass\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u4e0d\u4e00\u81f4<\/li>\n\n\n\n<li>\u4f9d\u5b58\u95a2\u4fc2\u306e\u7af6\u5408<\/li>\n<\/ul>\n\n\n\n<p>\u89e3\u6c7a\u65b9\u6cd5\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ package.json\u306e\u4fee\u6b63\n{\n  \"devDependencies\": {\n    \"sass-loader\": \"^10.0.0\",  \/\/ \u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u660e\u793a\u7684\u306b\u6307\u5b9a\n    \"sass\": \"^1.32.0\"         \/\/ dart-sass\u3092\u4f7f\u7528\n  }\n}\n\n\/\/ webpack.config.js\u3067\u306e\u5bfe\u5fdc\n{\n  loader: 'sass-loader',\n  options: {\n    implementation: require('sass'),  \/\/ dart-sass\u3092\u660e\u793a\u7684\u306b\u4f7f\u7528\n  }\n}<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>@import\u95a2\u9023\u306e\u30a8\u30e9\u30fc<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u30a8\u30e9\u30fc\u4f8b\uff1a@import \".\/variables\" failed to resolve\n@import \".\/variables\";  \/\/ \u62e1\u5f35\u5b50\u304c\u306a\u3044\n\n\/\/ \u89e3\u6c7a\u65b9\u6cd51\uff1a\u62e1\u5f35\u5b50\u3092\u660e\u793a\n@import \".\/variables.scss\";\n\n\/\/ \u89e3\u6c7a\u65b9\u6cd52\uff1awebpack.config.js\u3067resolvePaths\u8a2d\u5b9a\n{\n  loader: 'sass-loader',\n  options: {\n    sassOptions: {\n      includePaths: [path.resolve(__dirname, 'src\/styles')]\n    }\n  }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-12\">\u30d0\u30fc\u30b8\u30e7\u30f3\u4e92\u63db\u6027\u306e\u554f\u984c\u3068\u5bfe\u51e6\u6cd5<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Webpack\u3068sass-loader\u306e\u4e92\u63db\u6027\u30de\u30c8\u30ea\u30c3\u30af\u30b9<\/strong><\/li>\n<\/ol>\n\n\n<div id=\"id-58e3448d-ca14-4ee8-b03b-48f24792f385\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Webpack \u30d0\u30fc\u30b8\u30e7\u30f3<\/th><th>\u63a8\u5968sass-loader \u30d0\u30fc\u30b8\u30e7\u30f3<\/th><th>\u63a8\u5968sass \u30d0\u30fc\u30b8\u30e7\u30f3<\/th><\/tr><\/thead><tbody><tr><td>5.x<\/td><td>^10.0.0<\/td><td>^1.32.0<\/td><\/tr><tr><td>4.x<\/td><td>^8.0.0<\/td><td>^1.26.0<\/td><\/tr><tr><td>3.x<\/td><td>^7.0.0<\/td><td>^1.22.0<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30d0\u30fc\u30b8\u30e7\u30f3\u66f4\u65b0\u6642\u306e\u6ce8\u610f\u70b9<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u65b0\u3057\u3044\u30d0\u30fc\u30b8\u30e7\u30f3\u3067\u306e\u8a2d\u5b9a\u5909\u66f4\u4f8b\n\/\/ \u53e4\u3044\u8a2d\u5b9a\n{\n  loader: 'sass-loader',\n  options: {\n    data: '$env: ' + process.env.NODE_ENV + ';'\n  }\n}\n\n\/\/ \u65b0\u3057\u3044\u8a2d\u5b9a\n{\n  loader: 'sass-loader',\n  options: {\n    additionalData: (content, loaderContext) =&gt; {\n      return `$env: ${process.env.NODE_ENV};` + content;\n    }\n  }\n}<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30a2\u30c3\u30d7\u30b0\u30ec\u30fc\u30c9\u624b\u9806<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># 1. \u73fe\u5728\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u306e\u78ba\u8a8d\nnpm list sass-loader sass webpack\n\n# 2. \u4f9d\u5b58\u95a2\u4fc2\u306e\u30d0\u30c3\u30af\u30a2\u30c3\u30d7\ncp package.json package.json.backup\n\n# 3. \u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u66f4\u65b0\nnpm update sass-loader sass webpack\n\n# 4. \u554f\u984c\u304c\u767a\u751f\u3057\u305f\u5834\u5408\u306e\u5fa9\u5143\nmv package.json.backup package.json\nnpm install<\/pre>\n\n\n\n<p>\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30a8\u30e9\u30fc\u7279\u5b9a\u306e\u30b9\u30c6\u30c3\u30d7<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>webpack \u2013verbose\u3067\u306e\u8a73\u7d30\u30ed\u30b0\u78ba\u8a8d<\/li>\n\n\n\n<li>node_modules\u306e\u4f9d\u5b58\u95a2\u4fc2\u30c1\u30a7\u30c3\u30af<\/li>\n\n\n\n<li>\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306e\u69cb\u6587\u78ba\u8a8d<\/li>\n\n\n\n<li>\u30d6\u30e9\u30a6\u30b6\u306e\u958b\u767a\u8005\u30c4\u30fc\u30eb\u3067\u306e\u30a8\u30e9\u30fc\u78ba\u8a8d<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u4e00\u822c\u7684\u306a\u89e3\u6c7a\u30a2\u30d7\u30ed\u30fc\u30c1<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   # 1. \u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u30af\u30ea\u30a2\n   npm cache clean --force\n\n   # 2. \u4f9d\u5b58\u95a2\u4fc2\u306e\u518d\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\n   rm -rf node_modules\n   npm install\n\n   # 3. webpack\u8a2d\u5b9a\u306e\u691c\u8a3c\n   npx webpack --config webpack.config.js --debug<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u554f\u984c\u306e\u89e3\u6c7a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ \u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u6709\u52b9\u5316\n   {\n     loader: 'sass-loader',\n     options: {\n       sassOptions: {\n         fiber: false,  \/\/ Node.js 16\u4ee5\u964d\u3067\u306f\u4e0d\u8981\n         outputStyle: 'compressed'\n       }\n     }\n   }<\/pre>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u89e3\u6c7a\u7b56\u3092\u9069\u5207\u306b\u9069\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u591a\u304f\u306e\u4e00\u822c\u7684\u306a\u554f\u984c\u3092\u52b9\u7387\u7684\u306b\u89e3\u6c7a\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-13\">sass-loader\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3068\u5fdc\u7528\u30c6\u30af\u30cb\u30c3\u30af<\/h2>\n\n\n\n<p>\u5b9f\u8df5\u7684\u306a\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067sass-loader\u3092\u6700\u5927\u9650\u306b\u6d3b\u7528\u3059\u308b\u305f\u3081\u306e\u3001\u9ad8\u5ea6\u306a\u30c6\u30af\u30cb\u30c3\u30af\u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-14\">\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u3068\u30df\u30c3\u30af\u30b9\u30a4\u30f3\u306e\u52b9\u7387\u7684\u306a\u5229\u7528<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u306e\u7ba1\u7406<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ _variables.scss\n$breakpoints: (\n  'sm': 576px,\n  'md': 768px,\n  'lg': 992px,\n  'xl': 1200px\n);\n\n$colors: (\n  'primary': #3498db,\n  'secondary': #2ecc71,\n  'danger': #e74c3c\n);\n\n\/\/ webpack.config.js\u3067\u306e\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u306e\u6ce8\u5165\n{\n  loader: 'sass-loader',\n  options: {\n    additionalData: `\n      @import \"src\/styles\/variables\";\n      @import \"src\/styles\/mixins\";\n    `\n  }\n}<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u518d\u5229\u7528\u53ef\u80fd\u306a\u30df\u30c3\u30af\u30b9\u30a4\u30f3<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ _mixins.scss\n@mixin responsive($breakpoint) {\n  @if map-has-key($breakpoints, $breakpoint) {\n    @media (min-width: map-get($breakpoints, $breakpoint)) {\n      @content;\n    }\n  }\n}\n\n@mixin flex-center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n\/\/ \u4f7f\u7528\u4f8b\n.container {\n  @include flex-center;\n\n  @include responsive('md') {\n    flex-direction: row;\n  }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-15\">\u30e2\u30b8\u30e5\u30fc\u30eb\u5206\u5272\u306b\u3088\u308b\u4fdd\u5b88\u6027\u306e\u5411\u4e0a<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d5\u30a1\u30a4\u30eb\u69cb\u9020\u306e\u6700\u9069\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">src\/\n\u251c\u2500\u2500 styles\/\n\u2502   \u251c\u2500\u2500 base\/\n\u2502   \u2502   \u251c\u2500\u2500 _reset.scss\n\u2502   \u2502   \u251c\u2500\u2500 _typography.scss\n\u2502   \u2502   \u2514\u2500\u2500 _utilities.scss\n\u2502   \u251c\u2500\u2500 components\/\n\u2502   \u2502   \u251c\u2500\u2500 _buttons.scss\n\u2502   \u2502   \u251c\u2500\u2500 _forms.scss\n\u2502   \u2502   \u2514\u2500\u2500 _cards.scss\n\u2502   \u251c\u2500\u2500 layouts\/\n\u2502   \u2502   \u251c\u2500\u2500 _header.scss\n\u2502   \u2502   \u251c\u2500\u2500 _footer.scss\n\u2502   \u2502   \u2514\u2500\u2500 _grid.scss\n\u2502   \u251c\u2500\u2500 _variables.scss\n\u2502   \u251c\u2500\u2500 _mixins.scss\n\u2502   \u2514\u2500\u2500 main.scss<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u5206\u5272\u3068\u7d71\u5408<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ main.scss\n\/\/ Base\n@import 'base\/reset';\n@import 'base\/typography';\n@import 'base\/utilities';\n\n\/\/ Components\n@import 'components\/buttons';\n@import 'components\/forms';\n@import 'components\/cards';\n\n\/\/ Layouts\n@import 'layouts\/header';\n@import 'layouts\/footer';\n@import 'layouts\/grid';\n\n\/\/ webpack.config.js\u3067\u306e\u8a2d\u5b9a\n{\n  loader: 'sass-loader',\n  options: {\n    sassOptions: {\n      includePaths: [\n        path.resolve(__dirname, 'src\/styles')\n      ]\n    }\n  }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-16\">CI\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u3067\u306e\u6700\u9069\u306a\u8a2d\u5b9a\u65b9\u6cd5<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u74b0\u5883\u5225\u306e\u8a2d\u5b9a\u7ba1\u7406<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ webpack.config.js\nconst getStyleConfig = (env) =&gt; {\n  const isDev = env === 'development';\n\n  return {\n    loader: 'sass-loader',\n    options: {\n      sassOptions: {\n        outputStyle: isDev ? 'expanded' : 'compressed',\n        sourceMap: isDev,\n        fiber: false\n      },\n      additionalData: `$env: '${env}';`\n    }\n  };\n};\n\nmodule.exports = (env) =&gt; ({\n  module: {\n    rules: [\n      {\n        test: \/\\.scss$\/,\n        use: [\n          isDev ? 'style-loader' : MiniCssExtractPlugin.loader,\n          'css-loader',\n          getStyleConfig(env)\n        ]\n      }\n    ]\n  }\n});<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>CI\/CD\u8a2d\u5b9a\u4f8b<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># .gitlab-ci.yml\u4f8b\nstages:\n  - validate\n  - build\n  - test\n  - deploy\n\nvalidate-styles:\n  stage: validate\n  script:\n    - npm install\n    - npx stylelint \"src\/**\/*.scss\"\n\nbuild-styles:\n  stage: build\n  script:\n    - npm install\n    - npm run build\n  artifacts:\n    paths:\n      - dist\/css\/\n\nstyle-test:\n  stage: test\n  script:\n    - npm run test:styles<\/pre>\n\n\n\n<p>\u5b9f\u88c5\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Critical CSS\u306e\u5206\u96e2<\/li>\n\n\n\n<li>\u30b3\u30fc\u30c9\u5206\u5272\u306e\u6d3b\u7528<\/li>\n\n\n\n<li>\u4f7f\u7528\u3055\u308c\u3066\u3044\u306a\u3044\u30b9\u30bf\u30a4\u30eb\u306e\u524a\u9664<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u4fdd\u5b88\u6027\u306e\u5411\u4e0a<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u547d\u540d\u898f\u5247\u306e\u7d71\u4e00\uff08BEM\u65b9\u5f0f\u63a8\u5968\uff09<\/li>\n\n\n\n<li>\u30b3\u30e1\u30f3\u30c8\u306e\u9069\u5207\u306a\u4f7f\u7528<\/li>\n\n\n\n<li>\u30b9\u30bf\u30a4\u30eb\u30ac\u30a4\u30c9\u306e\u4f5c\u6210\u3068\u7dad\u6301<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u52b9\u7387\u306e\u5411\u4e0a<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30b9\u30bf\u30a4\u30eb\u306e\u81ea\u52d5\u751f\u6210\u6a5f\u80fd\u306e\u6d3b\u7528<\/li>\n\n\n\n<li>\u30ea\u30f3\u30c8\u30c4\u30fc\u30eb\u306e\u5c0e\u5165<\/li>\n\n\n\n<li>CSS\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u6d3b\u7528<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u3092\u9069\u5207\u306b\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u52b9\u7387\u7684\u3067\u4fdd\u5b88\u6027\u306e\u9ad8\u3044\u30b9\u30bf\u30a4\u30eb\u7ba1\u7406\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Warning: Undefined array key &#8220;is_admin&#8221; in \/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/ &#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":{"0":"post-1576","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-ruby","7":"nothumb"},"_links":{"self":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/1576","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1576"}],"version-history":[{"count":1,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/1576\/revisions"}],"predecessor-version":[{"id":1577,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/1576\/revisions\/1577"}],"wp:attachment":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1576"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1576"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1576"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}