![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
|
Javascript Webpack Sass |
$ npm install --save-dev css-loader style-loader sass-loader node-sass sassnode-sass (node版sassコンパイラ) は webpack init で必要になる。あとで sass (dart版sassコンパイラ) に差し替える
// Generated using webpack-cli https://github.com/webpack/webpack-cli
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
const isProduction = process.env.NODE_ENV == "production";
const stylesHandler = MiniCssExtractPlugin.loader;
const config = {
entry: "./src/index.ts",
output: {
path: path.resolve(__dirname, "dist"),
},
devServer: {
open: true,
host: "localhost",
},
plugins: [
new HtmlWebpackPlugin({
template: "index.html",
}),
new MiniCssExtractPlugin(),
// Add your plugins here
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
],
module: {
rules: [
{
test: /\.(ts|tsx)$/i,
loader: "ts-loader",
exclude: ["/node_modules/"],
},
{
test: /\.css$/i,
use: [stylesHandler, "css-loader"],
},
{
test: /\.s[ac]ss$/i,
use: [
stylesHandler,
"css-loader",
{
loader: "sass-loader",
options: {
// Use "dart-sass" insead of "node-sass" for compiling sass.
// The "node-sass" is default compiler of the webpack.
// The Sass lang plans to deprecate @include in 2022 and recommends to use @use or @forward.
// But the "node-sass" compiler still doesn't implement @use and @forward sentence in early 2022.
implementation: require("sass"),
},
},
],
},
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
type: "asset",
},
// Add your rules for custom modules here
// Learn more about loaders from https://webpack.js.org/loaders/
],
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
};
module.exports = () => {
if (isProduction) {
config.mode = "production";
config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
} else {
config.mode = "development";
}
return config;
};
/**
* コメント1.
*/
@charset "UTF-8";
@use "./variable" as v;
// コメント2.
body {
background-color: v.$bgcolor;
}
@debug "BGCLOLOR: #{v.$bgcolor}";
// コメント3.
nav {
padding: 0 20px;
background: v.$navbar-color;
ul {
list-style: none;
li {
@include v.kadomaru(10px);
display: inline-block;
margin: 0px 5px;
a {
text-decoration: none;
margin: 10px;
&:hover { color: red; }
&:link { color: deepskyblue; }
}
}
}
}
$bgcolor: khaki;
$navbar-color: pink;
@mixin kadomaru ($radius:0px) {
border-style: solid;
border-width: 1px;
border-color: brown;
border-radius: $radius;
}
@charset "UTF-8";
/**
* コメント1.
*/
body {
background-color: khaki;
}
nav {
padding: 0 20px;
background: pink;
}
nav ul {
list-style: none;
}
nav ul li {
border-style: solid;
border-width: 1px;
border-color: brown;
border-radius: 10px;
display: inline-block;
margin: 0px 5px;
}
nav ul li a {
text-decoration: none;
margin: 10px;
}
nav ul li a:hover {
color: red;
}
nav ul li a:link {
color: deepskyblue;
}
<body>
<h1>XYZ Company</h1>
<nav>
<ul>
<li><a href="#">Service</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Careers</a></li>
</ul>
</nav>
</body>
$-private : "この変数は @use で参照できない"
$msg-font-size: 10px
.message{ ... }
.info{
@extent .message;
font-color: gray;
font-size: $msg-font-size + 2;
}
.warn{
@extent .message;
font-color: orange;
font-size: $msg-font-size + 3;
}
.error{
@extent .message;
font-color: red;
font-size: $msg-font-size + 4;
}
scss.png