최신 Webpack(4.1.1)에서 보통 Scss 사용
PC는 별로 관계 없지만 일단 Mac에서 만들어 우분투에서도 움직였습니다. 버전은 2018/03/21 현재 latest 4.1.1을 사용합니다. 라이브러리이므로 CSS를 남기기 위해 extract-text-webpack-plugin을 이용하지만 오류로 인해 next 사용하고 커뮤니티에서 누군가가 말했습니다 (적당
밑바닥
먼저 webpack과 종속 패키지를 npm install합니다.
# sassというフォルダ名で作ります
mkdir sass && cd sass
# 必要な依存を-D（開発環境のみ使用）でnpm install
npm i -D webpack webpack-cli node-sass css-loader sass-loader extract-text-webpack-plugin@next
#extract-text-webpack-pluginは修正済みの@next版を使わないとエラー出ます
필요한 파일을 만듭니다.
# めんどいのでまとめて、srcフォルダ（開発用）に編集するindex.jsやscssファイルとdistフォルダ（出力用）にルートドキュメントのindex.htmlを作成、ここは自由
mkdir src && touch src/index.js && touch src/style.scss && mkdir dist && touch dist/index.html
# 設定ファイルを作成
touch webpack.config.js
여기에 Webpack에 대한 설정이 적용됩니다.
webpack.config.js// 開発環境によって切り分ける際に使用するための定数を定義
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ENV = 'development';
const userSourceMap = (ENV === 'development');
module.exports = {
mode: ENV,
module: {
rules: [
{
test: /\.scss/, // 対象となるファイルの拡張子
use: ExtractTextPlugin.extract({
use:
[
{
loader: 'css-loader',
options: {
url: false,
sourceMap: userSourceMap,
importLoaders: 2
},
},
{
loader: 'sass-loader',
options: {
// ソースマップの利用有無
sourceMap: userSourceMap,
}
}
]
}),
},
],
},
plugins: [
new ExtractTextPlugin('style.css'),
],
};
Sass를 위해
style.scss를 다음과 같이 편집합니다.
style.scssdiv {
h1 {
display:none;
}
}
이것은 div 안에 들어있는 h1은 사라지라는 의미가 됩니다.
추가 index.html을 편집합니다.
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sassためす</title>
<link rel="stylesheet" href="style.css" />
<script src="main.js"></script>
</head>
<body>
<h1>僕は存在します</h1>
<div>
<h1>僕は消されます</h1>
</div>
</body>
</html>
index.jsimport './style.scss'; //scssの読み込み
Scss가 성공적으로 컴파일되면 div의 h1만 지워집니다.
개발할 때는 다음 명령으로 watch
webpack --watch # --wacthをつけるとファイルの変更を読み取って自動でコンパイルしてくれる
open dist/index.html # Macしかできない芸当だけどubuntuとかは普通にブラウザでファイルひらけばok
오류가 발생하지 않으면 대체로 컴파일 할 수 있습니다.
↑ 잘 되었을 때의 스쿠쇼
요약
의외로 번거롭기 때문에, 코피페용에 가깝다.
Reference
이 문제에 관하여(최신 Webpack(4.1.1)에서 보통 Scss 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/wktq/items/a9f2c19805d597eaaaff
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
# sassというフォルダ名で作ります
mkdir sass && cd sass
# 必要な依存を-D（開発環境のみ使用）でnpm install
npm i -D webpack webpack-cli node-sass css-loader sass-loader extract-text-webpack-plugin@next
#extract-text-webpack-pluginは修正済みの@next版を使わないとエラー出ます
# めんどいのでまとめて、srcフォルダ（開発用）に編集するindex.jsやscssファイルとdistフォルダ（出力用）にルートドキュメントのindex.htmlを作成、ここは自由
mkdir src && touch src/index.js && touch src/style.scss && mkdir dist && touch dist/index.html
# 設定ファイルを作成
touch webpack.config.js
// 開発環境によって切り分ける際に使用するための定数を定義
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ENV = 'development';
const userSourceMap = (ENV === 'development');
module.exports = {
mode: ENV,
module: {
rules: [
{
test: /\.scss/, // 対象となるファイルの拡張子
use: ExtractTextPlugin.extract({
use:
[
{
loader: 'css-loader',
options: {
url: false,
sourceMap: userSourceMap,
importLoaders: 2
},
},
{
loader: 'sass-loader',
options: {
// ソースマップの利用有無
sourceMap: userSourceMap,
}
}
]
}),
},
],
},
plugins: [
new ExtractTextPlugin('style.css'),
],
};
style.scss를 다음과 같이 편집합니다.
style.scss
div {
h1 {
display:none;
}
}
이것은 div 안에 들어있는 h1은 사라지라는 의미가 됩니다.
추가 index.html을 편집합니다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sassためす</title>
<link rel="stylesheet" href="style.css" />
<script src="main.js"></script>
</head>
<body>
<h1>僕は存在します</h1>
<div>
<h1>僕は消されます</h1>
</div>
</body>
</html>
index.js
import './style.scss'; //scssの読み込み
Scss가 성공적으로 컴파일되면 div의 h1만 지워집니다.
개발할 때는 다음 명령으로 watch
webpack --watch # --wacthをつけるとファイルの変更を読み取って自動でコンパイルしてくれる
open dist/index.html # Macしかできない芸当だけどubuntuとかは普通にブラウザでファイルひらけばok
오류가 발생하지 않으면 대체로 컴파일 할 수 있습니다.
↑ 잘 되었을 때의 스쿠쇼
요약
의외로 번거롭기 때문에, 코피페용에 가깝다.
Reference
이 문제에 관하여(최신 Webpack(4.1.1)에서 보통 Scss 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/wktq/items/a9f2c19805d597eaaaff
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(최신 Webpack(4.1.1)에서 보통 Scss 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/wktq/items/a9f2c19805d597eaaaff텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
