style-loader、css-loader、sass-loader 的使用

Posted on Edited on In Views: Disqus:

 

此文章也是採 step by step 操作教學

 

一、style-loader、css-loader 的使用

css-loader 是用來把 css 語法轉成 webpack 看的懂的 javascript語法，而

style-loader 是用來把 webpack 處理好的 css 樣式注入在 style tag 裡，

藉而達成 css 樣式附加到 DOM 上。

 

1、新增工作區資料夾

$ mkdir test

並進到 test 資料夾裡

$ cd test

 

2、在 test 資料夾內 npm 初始

$ npm init -y

 

3、在 test 資料夾新增 src、dist 資料夾

src 資料夾放入 index.js 與 style.css 檔，

index.js 內容為

const style = require('./style.css');

style.css 內容為

p {
    color: red;
}

 

dist 資料夾放入 index.html 檔

index.html 內容為

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <p>ppp</p>
  <script src="./main.js"></script>
</body>

</html>

 

4、在 test 資料夾下準備 webpack.config.js 內容為

const path = require('path');

module.exports = {
    entry: './src/index.js',

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            }
        ]
    }
}

注意 loader 被呼叫的順序為從最後開始最先被呼叫，

以上例子，也就是 css-loader 最先被呼叫，接下來才是 style-loader。

 

5、經由以上步驟相關檔案也備妥了，開始安裝相關套件

$ npm install webpack webpack-cli --save-dev

$ npm install style-loader --save-dev

$ npm install css-loader --save-dev

 

6、利用 webpack 轉譯出 main.js 檔

$ npx webpack

 

7、執行成果

 

二、sass-loader 的使用

sass-loader 是用來把 sass 檔轉成含有 css 樣式的 .js 檔。

 

1、新增工作區資料夾

$ mkdir test

並進到 test 資料夾裡

$ cd test

 

2、在 test 資料夾內 npm 初始

$ npm init -y

 

3、在 test 資料夾新增 src、dist 資料夾

src 資料夾放入 scss_style.js 與 scss_style.scss 檔，

scss_style.scss 檔內容為

$color: blue;
span {
    color: $color;
}

scss_style.js檔內容為

const style = require('./scss_style.scss');

於 dist 資料夾下的 index.html 內容改為

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <p>ppp</p>
  <span>span</span>
  <script src="./scss_style.js"></script>
</body>

</html>

 

4、test 資料夾下新增 webpack.config.js 檔，內容為

const path = require('path');

module.exports = {
    entry: {
        scss_style: './src/scss_style.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            // sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            // sourceMap: true
                        }
                    }
                ]
            },
        ]
    }
}

 

5、經由以上步驟相關檔案也備妥了，開始安裝相關套件

$ npm install webpack webpack-cli --save-dev

$ npm install style-loader --save-dev

$ npm install css-loader --save-dev

 

6、要處理 sass/csss 檔時記得安裝相關套件

$ npm install sass-loader node-sass --save-dev

 

7、利用 webpack 轉譯出目地檔

$ npx webpack

 

8、執行成果

 

參考資料：

ExtractTextWebpackPlugin

Webpack 實作入門2：打包 CSS / SCSS 與 加入 Bootstrap