[컴][nodejs] css-loader 사용법

webpack css loader /

css loader 사용 | webpack

설치

npm install style-loader css-loader --save-dev

사용법

사용법은 예제를 보는 것이 빠르다. ref. 2 를 살펴보면 된다.

여기서 간략하게 설명해보면,

.css 파일은 어떤 .js 에 import 되면 style-loader 와 css-loader 를 사용해서 변경(?) 하게 된다. 이것은 아래보이듯이 webpack config 에서 .css file 에 대한 설정을 해줬기 때문이다.

// webpack.config.js
module.exports = {
    ...
    
    module: {
        loaders: [
            ...
            { 
                test: /\.css$/, 
                loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
            },
    
    },
    ...
};

예를 들어 아래처럼 설정이 됐다면, class 가 설정되어 있다면, 이녀석을 .jsx 에서 import 로 포함시키고, 변수처럼 사용할 수 있다.(아래 예제에서 styles.predUp)

이 styles.predUp 에 해당하는 css 의 class name 은 위의 config.js 의 css-loader 에 적혀있는 것처럼 이름이 변경돼서, html page 안의 <style> tag 로 들어가게 된다.

아래 예제를 참고하자.

// predup.css
.predUp{
    display: block;
}

// predup.jsx

import styles from './predup.css'
import React from 'react'; // export default ()=>{}
import ReactDOM from 'react-dom'; // export default ()=>{}

export class PredUp extends React.Component{
 constructor(props) {
  super(props);
  this.state = {
  }
 }
 render(){
  return <div className={styles.predUp}>
    Test
   </div>
 }
}

_createClass(PredUp, [{
  key: 'render',
  value: function render() {
   return __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
    'div',
    { className: __WEBPACK_IMPORTED_MODULE_0__predup_css___default.a.predUp },
    'Test'
   );
  }
 }]);
//
// __WEBPACK_IMPORTED_MODULE_0__predup_css___default.a.predUp == 'predup__predUp___3zakH''
// 
// html
<style type="text/css">
.predup__predUp___3zakH{
    display: block;
}</style>

:global

아래처럼 local css 와 global css 가 섞을 때는 아래처럼 css file 에 :global 을 붙여야 한다. 자세한 설명은 여기를 참고하자.

<div className={styles.myclass}>
<i className='fa fa-question-circle' ></i>
</div>

.myclass :global(.fa-question-circle){
    margin-left: 6px;
}

url()

css-loader 에서 url(...) 은 require 로 변경된다. 하지만 '/' 로 시작하는 url 을 가진경우에는 변경되지 않는다.

url(/image.png) => url(/image.png)

그리고, url () 에서 상대경로 '.' 을 사용하고 싶다면, 아래처럼 사용하면 된다.

url(/image.png) => url(/image.png)
 loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader?root=." },
      ...
    ]

위처럼 root 를 지정해주면 아래처럼 경로가 만들어진다.

url(/image.png) => url(./image.png)

sass loader

• jtangelder/sass-loader: SASS loader for Webpack

npm install sass-loader node-sass webpack --save-dev
npm install bootstrap-sass --save-dev

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      }, 
      {
         test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
         loader: 'file'
      }
    ]
  }
};

.css file 사용

css 를 하나로 모아서 .css 로 추출하고 싶다면 ExtractTextPlugin 을 사용하면 된다.

global .css 사용

• How to use css-modules with other global css (discussion please don't merge it) by lapanoid · Pull Request #65 · css-modules/css-modules · GitHub

Reference

1. webpack/style-loader: style loader module for webpack
2. css-modules/webpack-demo: Working demo of CSS Modules, using Webpack's css-loader in module mode
3. stylesheets, webpack