## 使用style-loader
### 1.新建文件目錄
### 2.配置webpack.config
~~~javascript
var path = require("path"); //webpack升級到2.0以后，路徑需要引用這個模塊
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/app.js',
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name]-bundle.js'
},
module: {
rules: [{
test: /\.js$/, //用正則匹配找到所有的js文件
include: path.resolve(__dirname, 'src'), //指定babel-loaders尋找的文件路徑，注意需是絕對路徑
exclude: path.resolve(__dirname, 'node_modules'), //排除node_modules文件下js，注意需是絕對路徑
use: {
loader: 'babel-loader', //使用babel-loader處理找到的js文件
options:{
presets: 'es2015'
}
}
},
{
test: /\.css$/,
include: path.resolve(__dirname, 'src'), //指定babel-loaders尋找的文件路徑，注意需是絕對路徑
exclude: path.resolve(__dirname, 'node_modules'), //排除node_modules文件下js，注意需是絕對路徑
use: ["style-loader", "css-loader"]//注意先后順序，一般都要先用css-loader處理完然后用style-loader生成style標簽,但webpack讀取的順序相反
}
]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body',
title: 'This is my plugin title.'
})
]
}
~~~
**模板index.html**
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>
~~~
**app.js**
將app.js用ES6的語言引入待打包的common.css
~~~javascript
import style from './style/common.css'
const App = () => {
console.log("app測試");
}
~~~
**common.css**
~~~css
html , body {
padding: 0;
margin: 0;
background-color: red;
}
~~~
### 3.安裝loader
~~~
npm install --save-dev css-loader
npm install style-loader --save-dev
~~~
### 4.成功生成，查看css
發現在生成的index.html中并沒有看到內嵌的css代碼，那是因為我們在app.js中引入common.css，所以css代碼已經轉義到生成的app-bundle.js中，有興趣的同學可以自行查看（由于太長，這里就不貼出來了）。我們可以在瀏覽器里打開生成的index.html，通過開發者工具查看到html里的css代碼。
## 給css加入瀏覽器前綴
### 1.修改common.js并安裝postcss-loader
**common.js**
~~~css
html , body {
padding: 0;
margin: 0;
background-color: red;
}
.box-flex {
display: flex;
}
~~~
**index.html**
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div class="box-flex"></div>
</body>
</html>
~~~
**安裝postcss**
flex布局的兼容性不是很好，需要添加瀏覽器內核前綴，利用postcss可以有效的解決兼容性問題，這個插件功能比較強大，有200多個插件，主要是用來處理css。
~~~
npm install postcss --save-dev
npm install postcss-loader --save-dev
~~~
### 2.在webpack.congfig中添加post-loader
~~~javascript
var path = require("path"); //webpack升級到2.0以后，路徑需要引用這個模塊
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/app.js',
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name]-bundle.js'
},
module: {
rules: [{
test: /\.js$/, //用正則匹配找到所有的js文件
include: path.resolve(__dirname, 'src'), //指定babel-loaders尋找的文件路徑，注意需是絕對路徑
exclude: path.resolve(__dirname, 'node_modules'), //排除node_modules文件下js，注意需是絕對路徑
use: {
loader: 'babel-loader', //使用babel-loader處理找到的js文件
options:{
presets: 'es2015'
}
}
},
{
test: /\.css$/,
include: path.resolve(__dirname, 'src'), //指定babel-loaders尋找的文件路徑，注意需是絕對路徑
exclude: path.resolve(__dirname, 'node_modules'), //排除node_modules文件下js，注意需是絕對路徑
use: ["style-loader", "css-loader", "postcss-loader"]//注意先后順序，一般都要先用css-loader處理完然后用style-loader生成style標簽,但webpack讀取的順序相反
}
]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body',
title: 'This is my plugin title.'
})
]
}
~~~
### 3.新建并配置postcss.config.js文件
根據[postcss官網](https://www.npmjs.com/package/postcss-loader)使用規則，如果需要給postcss-loader參加參數或者插件，需要在根目錄下新建一個postcss.config.js，這里我只添加了一個自動加瀏覽器前綴的插件。
~~~javascript
module.exports = {
plugins: [
require('autoprefixer') //自動給css新屬性加瀏覽器前綴
]
}
~~~
### 4.成功生成，查看css
## 處理less/scss
### 1.style下新建test.scss
~~~scss
$blue: blue;
.test{
flex: 1;
color: $blue;
}
~~~
### 2.安裝sass-loader，配置webpack.config
~~~
npm install sass-loader node-sass webpack --save-dev
~~~
~~~
var path = require("path"); //webpack升級到2.0以后，路徑需要引用這個模塊
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/app.js',
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name]-bundle.js'
},
module: {
rules: [{
test: /\.js$/, //用正則匹配找到所有的js文件
include: path.resolve(__dirname, 'src'), //指定babel-loaders尋找的文件路徑，注意需是絕對路徑
exclude: path.resolve(__dirname, 'node_modules'), //排除node_modules文件下js，注意需是絕對路徑
use: {
loader: 'babel-loader', //使用babel-loader處理找到的js文件
options: {
presets: 'es2015'
}
}
},
{
test: /\.css$/,
include: path.resolve(__dirname, 'src'), //指定babel-loaders尋找的文件路徑，注意需是絕對路徑
exclude: path.resolve(__dirname, 'node_modules'), //排除node_modules文件下js，注意需是絕對路徑
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "postcss-loader"
}, {
loader: "sass-loader"
}]
},
{
test: /\.scss$/,
include: path.resolve(__dirname, 'src'), //指定babel-loaders尋找的文件路徑，注意需是絕對路徑
exclude: path.resolve(__dirname, 'node_modules'), //排除node_modules文件下js，注意需是絕對路徑
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "postcss-loader"
}, {
loader: "sass-loader"
}]
}
]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body',
title: 'This is my plugin title.'
})
]
}
~~~
### 3.修改app.js和模板index.html
**app.js**
~~~javascript
import style from './style/common.css'
import sass from './style/test.scss';
const App = () => {
console.log("app測試");
}
~~~
**index.html**
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div class="box-flex"></div>
<div class="test"></div>
</body>
</html>
~~~
### 4.成功生成，查看css
可以看到scss已經成功轉義成css并且嵌入到html里了。
