## 使用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里了。
