此篇介紹如何將 CSS 、 SASS 引入 Webpack 專案中，並使用 postcss 的 autoprefixer 自動將 CSS 加入相對的瀏覽器前綴。

安裝 css-loader style-loader

1
npm i -D css-loader
1
npm i -D style-loader

設定 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
  ......
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },
  ......
};

測試 CSS

  1. 在 src 資料夾創建一隻 app.css
1
2
3
body {
  background-color: yellowgreen;
}
  1. 將 app.css 引入 app.js 中

在 app.js 加入

1
require('./app.css');
  1. 執行 webpack 打包
1
npm run prod

執行完打開 dist 資料夾 index.html 就可以看到我們更改的草綠色背景囉！

網頁更改成草綠色背景囉

到這裡我們完成引入 CSS 的動作，接下來要來試試引入 SASS。

安裝 sass-loader

1
npm i sass-loader node-sass webpack -D

修改 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
  ......
  module: {
    rules: [
      {
        test: /\.css|scss$/,
        use: [ 'style-loader', 'css-loader', 'sass-loader' ]
      }
    ]
  },
  ......
};

測試 SASS

  1. 在 src 資料夾將 app.css 修改成 app.scss
1
2
3
4
5
6
body {
  background-color: yellowgreen;
  h1 {
    color: green;
  }
}
  1. 在 src 資料夾修改 index.html
1
2
3
<body>
  <h1> Test SASS Loader</h1>
</body>
  1. 將 app.scss 引入 app.js 中
1
require('./app.scss');
  1. 執行 webpack 打包
1
npm run prod

執行完打開 dist 資料夾 index.html 就可以看到我們更改的標題顏色囉！

網頁更改標題顏色

SASS 引入完成！！大家有發現網頁上的 css 怎麼都是跑到 head 裡面啦？接下來要教怎麼輸出成一隻 css 用 link 的方式引入到頁面上。

安裝 ExtractTextWebpackPlugin

1
npm i -D extract-text-webpack-plugin

修改 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const ExtractTextPlugin = require("extract-text-webpack-plugin");
......
module.exports = {
  ......
  module: {
    rules: [
      {
        test: /\.css|scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    ......
    new ExtractTextPlugin({
      filename: 'app.css',
      disable: false,
      allChunks: true
    })
  ]
};
  • 執行 webpack 打包
1
npm run prod

執行完打開 dist 資料夾 index.html 就可以看到 app.css 在 head 裡面囉！

每次因為不同瀏覽器寫前綴語是不是超麻煩的啊？接下來要來引入 postcss 的 autoprefixer ，透過設定 browserlist 讓 Webpack 自動做完這些事情呦。

安裝 postcss-loader

1
npm i -D  postcss-loader

新增 postcss.config.js

1
2
3
4
5
module.exports = {
  plugins: {
    'autoprefixer': {}
  }
}

在 package.json 設定 browserslist

1
2
3
4
5
6
7
8
9
{
  ......
  "browserslist": [
    "Explorer 11",
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ]
}

修改 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = {
  ......
  module: {
    rules: [
      {
        test: /\.css|scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: ['css-loader', 'postcss-loader', 'sass-loader']
        })
      }
    ]
  }
  ......
};

測試 postcss

  1. 修改 app.scss 檔案
1
2
3
4
5
6
7
body {
    background-color: yellowgreen;
    h1 {
        color: green;
        transform: scale(1.5);
    }
}
  1. 執行 Webpack 打包
1
npm run prod

打開 dist/app.css 就可以看到下面自動加入前綴語的 css 囉～

1
body{background-color:#9acd32}body h1{color:green;-webkit-transform:scale(1.5);-ms-transform:scale(1.5);transform:scale(1.5)}

今天的實作檔案整理在此github，謝謝收看。

參考資料