React + Webpack에서 Sass를 사용할 수있게하는 단계
소개
React+Webpack 개발 환경에 Sass를 도입했습니다.
이번에는 Webpack에서 Sass를 빌드하는 환경을 구축하는 절차를 설명합니다.
덧붙여 이번은 Sass를 도입하는 개발 환경의 병아리로서 용어 해설에서 정중하게. yarn에서 webpack-dev-server + Babel + React (JSX) 개발 환경 구축 절차 로 설명한 것을 이용합니다.
디렉토리 구성
이번 작성하는 개발 환경은 다음과 같은 디렉토리 구성으로 되어 있습니다.
├── dist
│ ├── bundle.js
│ ├── style.js
│ └── index.html
├── node_modules
├── package.json
├── src
│ ├── Hello.jsx
│ └── index.jsx
├── stylesheets
│ └── style.scss
├── webpack.config.js
└── yarn.lock
필요한 패키지 설치
먼저 필요한 패키지를 설치합니다.
설치하는 패키지에 대해 자세하게 설명을 하면, 로더는 CSS를 JavaScript상에서 읽어들일 수 있게 하는 역할, extract-text-webpack-plugin는 읽을 수 있게 된 CSS를 실제의 CSS 파일로 변환하는 역할을 합니다.
이 근처의 내용에 대해서는 어쩐지 이해하지 못하는 Webpack의 CSS 주변 의 기사를 매우 알기 쉽습니다.
$ yarn add --dev extract-text-webpack-plugin node-sass style-loader css-loader sass-loader
package.json을 확인하면 다음 줄이 추가되었음을 알 수 있습니다.
package.json{
"name": "react-webpack-sample",
"version": "1.0.0",
"description": "sample application for react with webpack",
"main": "index.js",
"author": "nishina555",
"license": "MIT",
"dependencies": {
"react": "^16.1.0",
"react-dom": "^16.1.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
+ "css-loader": "^0.28.7",
+ "extract-text-webpack-plugin": "^3.0.2",
+ "node-sass": "^4.6.0",
+ "sass-loader": "^6.0.6",
+ "style-loader": "^0.19.0",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
}
}
Webpack 설정
webpack.config.js에 다음 내용을 추가합니다.
이번에는 stylesheets/style.scss 를 dist/style.css 로 변환한다는 설정을 하고 있습니다.
기술 방법에 대해서는 extract-text-webpack-plugin의 저장소 에 쓰여 있으므로 그것을 참고로 기술해 갑니다.
webpack.config.js const path = require('path');
+ const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = [
{
entry: __dirname + "/src/index.jsx", // トランスパイル対象
output: {
path: __dirname + '/dist', // 出力先ディレクトリ
filename: 'bundle.js' // 入力されたファイルをまとめて出力するときのファイル名
},
module: {
rules: [
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: "babel-loader", // Babelをwebpackで利用できるようにする
options:{
presets: ['react', 'es2015'] // reactとes2015をトランスパイル対象とする
}
},
]
},
devServer: {
contentBase: path.resolve(__dirname, "dist"), // distディレクトリのファイルを確認する
port: 3000, // 3000ポートを利用
},
resolve: {
extensions: ['.js', '.jsx'] // jsファイル, jsxファイルを対象とする
}
},
+ {
+ entry: {
+ style: __dirname + "/stylesheets/style.scss", // トランスパイル対象
+ },
+ output: {
+ path: __dirname + '/dist', // 出力先ディレクトリ
+ filename: '[name].css'
+ },
+ module: {
+ rules: [
+ {
+ test: /\.scss$/,
+ loader: ExtractTextPlugin.extract({
+ fallback: 'style-loader',
+ use: ['css-loader', 'sass-loader']
+ })
+ }
+ ]
+ },
+ plugins: [
+ new ExtractTextPlugin('[name].css'),
+ ],
+ },
];
샘플 만들기
그런 다음 샘플을 만듭니다.
먼저 stylesheets 디렉토리를 만들고 거기에 scss 파일을 만듭니다.
stylesheets/style.scss$red: #FF3333;
h1 {
color: $red;
}
이 상태에서 webpack을 실행하면 dist 디렉토리에 css 파일이 생성된다는 것을 알 수 있습니다. (이 작업은 동작 확인을 할 때하지 않아도 문제 없습니다.)
$ ./node_modules/.bin/webpack
$ ls dist
bundle.js index.html style.css
그런 다음 index.html에 다음 항목을 추가합니다.
이제 webpack으로 컴파일된 CSS 파일을 로드할 수 있습니다.
index.html<!DOCTYPE html>
<html><head>
<title>react-webpack-sample</title>
<meta charset="utf-8">
+ <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
동작 확인
webpack-dev-server를 시작하고 scss가 올바르게 반영되었는지 확인합니다.
$ ./node_modules/.bin/webpack-dev-server
http://localhost:3000/ 에 액세스하고 다음과 같이 되어 있으면 OK입니다.
Reference
이 문제에 관하여(React + Webpack에서 Sass를 사용할 수있게하는 단계), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/nishina555/items/98a628fec0db91466013
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이번 작성하는 개발 환경은 다음과 같은 디렉토리 구성으로 되어 있습니다.
├── dist
│ ├── bundle.js
│ ├── style.js
│ └── index.html
├── node_modules
├── package.json
├── src
│ ├── Hello.jsx
│ └── index.jsx
├── stylesheets
│ └── style.scss
├── webpack.config.js
└── yarn.lock
필요한 패키지 설치
먼저 필요한 패키지를 설치합니다.
설치하는 패키지에 대해 자세하게 설명을 하면, 로더는 CSS를 JavaScript상에서 읽어들일 수 있게 하는 역할, extract-text-webpack-plugin는 읽을 수 있게 된 CSS를 실제의 CSS 파일로 변환하는 역할을 합니다.
이 근처의 내용에 대해서는 어쩐지 이해하지 못하는 Webpack의 CSS 주변 의 기사를 매우 알기 쉽습니다.
$ yarn add --dev extract-text-webpack-plugin node-sass style-loader css-loader sass-loader
package.json을 확인하면 다음 줄이 추가되었음을 알 수 있습니다.
package.json{
"name": "react-webpack-sample",
"version": "1.0.0",
"description": "sample application for react with webpack",
"main": "index.js",
"author": "nishina555",
"license": "MIT",
"dependencies": {
"react": "^16.1.0",
"react-dom": "^16.1.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
+ "css-loader": "^0.28.7",
+ "extract-text-webpack-plugin": "^3.0.2",
+ "node-sass": "^4.6.0",
+ "sass-loader": "^6.0.6",
+ "style-loader": "^0.19.0",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
}
}
Webpack 설정
webpack.config.js에 다음 내용을 추가합니다.
이번에는 stylesheets/style.scss 를 dist/style.css 로 변환한다는 설정을 하고 있습니다.
기술 방법에 대해서는 extract-text-webpack-plugin의 저장소 에 쓰여 있으므로 그것을 참고로 기술해 갑니다.
webpack.config.js const path = require('path');
+ const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = [
{
entry: __dirname + "/src/index.jsx", // トランスパイル対象
output: {
path: __dirname + '/dist', // 出力先ディレクトリ
filename: 'bundle.js' // 入力されたファイルをまとめて出力するときのファイル名
},
module: {
rules: [
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: "babel-loader", // Babelをwebpackで利用できるようにする
options:{
presets: ['react', 'es2015'] // reactとes2015をトランスパイル対象とする
}
},
]
},
devServer: {
contentBase: path.resolve(__dirname, "dist"), // distディレクトリのファイルを確認する
port: 3000, // 3000ポートを利用
},
resolve: {
extensions: ['.js', '.jsx'] // jsファイル, jsxファイルを対象とする
}
},
+ {
+ entry: {
+ style: __dirname + "/stylesheets/style.scss", // トランスパイル対象
+ },
+ output: {
+ path: __dirname + '/dist', // 出力先ディレクトリ
+ filename: '[name].css'
+ },
+ module: {
+ rules: [
+ {
+ test: /\.scss$/,
+ loader: ExtractTextPlugin.extract({
+ fallback: 'style-loader',
+ use: ['css-loader', 'sass-loader']
+ })
+ }
+ ]
+ },
+ plugins: [
+ new ExtractTextPlugin('[name].css'),
+ ],
+ },
];
샘플 만들기
그런 다음 샘플을 만듭니다.
먼저 stylesheets 디렉토리를 만들고 거기에 scss 파일을 만듭니다.
stylesheets/style.scss$red: #FF3333;
h1 {
color: $red;
}
이 상태에서 webpack을 실행하면 dist 디렉토리에 css 파일이 생성된다는 것을 알 수 있습니다. (이 작업은 동작 확인을 할 때하지 않아도 문제 없습니다.)
$ ./node_modules/.bin/webpack
$ ls dist
bundle.js index.html style.css
그런 다음 index.html에 다음 항목을 추가합니다.
이제 webpack으로 컴파일된 CSS 파일을 로드할 수 있습니다.
index.html<!DOCTYPE html>
<html><head>
<title>react-webpack-sample</title>
<meta charset="utf-8">
+ <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
동작 확인
webpack-dev-server를 시작하고 scss가 올바르게 반영되었는지 확인합니다.
$ ./node_modules/.bin/webpack-dev-server
http://localhost:3000/ 에 액세스하고 다음과 같이 되어 있으면 OK입니다.
Reference
이 문제에 관하여(React + Webpack에서 Sass를 사용할 수있게하는 단계), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/nishina555/items/98a628fec0db91466013
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ yarn add --dev extract-text-webpack-plugin node-sass style-loader css-loader sass-loader
{
"name": "react-webpack-sample",
"version": "1.0.0",
"description": "sample application for react with webpack",
"main": "index.js",
"author": "nishina555",
"license": "MIT",
"dependencies": {
"react": "^16.1.0",
"react-dom": "^16.1.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
+ "css-loader": "^0.28.7",
+ "extract-text-webpack-plugin": "^3.0.2",
+ "node-sass": "^4.6.0",
+ "sass-loader": "^6.0.6",
+ "style-loader": "^0.19.0",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
}
}
webpack.config.js에 다음 내용을 추가합니다.
이번에는
stylesheets/style.scss 를 dist/style.css 로 변환한다는 설정을 하고 있습니다.기술 방법에 대해서는 extract-text-webpack-plugin의 저장소 에 쓰여 있으므로 그것을 참고로 기술해 갑니다.
webpack.config.js
const path = require('path');
+ const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = [
{
entry: __dirname + "/src/index.jsx", // トランスパイル対象
output: {
path: __dirname + '/dist', // 出力先ディレクトリ
filename: 'bundle.js' // 入力されたファイルをまとめて出力するときのファイル名
},
module: {
rules: [
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: "babel-loader", // Babelをwebpackで利用できるようにする
options:{
presets: ['react', 'es2015'] // reactとes2015をトランスパイル対象とする
}
},
]
},
devServer: {
contentBase: path.resolve(__dirname, "dist"), // distディレクトリのファイルを確認する
port: 3000, // 3000ポートを利用
},
resolve: {
extensions: ['.js', '.jsx'] // jsファイル, jsxファイルを対象とする
}
},
+ {
+ entry: {
+ style: __dirname + "/stylesheets/style.scss", // トランスパイル対象
+ },
+ output: {
+ path: __dirname + '/dist', // 出力先ディレクトリ
+ filename: '[name].css'
+ },
+ module: {
+ rules: [
+ {
+ test: /\.scss$/,
+ loader: ExtractTextPlugin.extract({
+ fallback: 'style-loader',
+ use: ['css-loader', 'sass-loader']
+ })
+ }
+ ]
+ },
+ plugins: [
+ new ExtractTextPlugin('[name].css'),
+ ],
+ },
];
샘플 만들기
그런 다음 샘플을 만듭니다.
먼저 stylesheets 디렉토리를 만들고 거기에 scss 파일을 만듭니다.
stylesheets/style.scss$red: #FF3333;
h1 {
color: $red;
}
이 상태에서 webpack을 실행하면 dist 디렉토리에 css 파일이 생성된다는 것을 알 수 있습니다. (이 작업은 동작 확인을 할 때하지 않아도 문제 없습니다.)
$ ./node_modules/.bin/webpack
$ ls dist
bundle.js index.html style.css
그런 다음 index.html에 다음 항목을 추가합니다.
이제 webpack으로 컴파일된 CSS 파일을 로드할 수 있습니다.
index.html<!DOCTYPE html>
<html><head>
<title>react-webpack-sample</title>
<meta charset="utf-8">
+ <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
동작 확인
webpack-dev-server를 시작하고 scss가 올바르게 반영되었는지 확인합니다.
$ ./node_modules/.bin/webpack-dev-server
http://localhost:3000/ 에 액세스하고 다음과 같이 되어 있으면 OK입니다.
Reference
이 문제에 관하여(React + Webpack에서 Sass를 사용할 수있게하는 단계), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/nishina555/items/98a628fec0db91466013
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$red: #FF3333;
h1 {
color: $red;
}
$ ./node_modules/.bin/webpack
$ ls dist
bundle.js index.html style.css
<!DOCTYPE html>
<html><head>
<title>react-webpack-sample</title>
<meta charset="utf-8">
+ <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
webpack-dev-server를 시작하고 scss가 올바르게 반영되었는지 확인합니다.
$ ./node_modules/.bin/webpack-dev-server
http://localhost:3000/ 에 액세스하고 다음과 같이 되어 있으면 OK입니다.
Reference
이 문제에 관하여(React + Webpack에서 Sass를 사용할 수있게하는 단계), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nishina555/items/98a628fec0db91466013텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
