react&webpack使用css、less && 安装原则 --- 从根本上解决问题。

　　在webpack-react项目中，css的使用对于不同人有不同的选择，早起是推荐在jsx文件中使用 css inline js的，但是这种方法要写很多对象来表示一个一个的标签，并且对于这些对象，我们在写样式时，还必须要使用驼峰式的写法，所以，这无疑使我们不能接受的，最好的做法就是讲css文件写在一个单独的文件夹中外联进来。

　　webpack同时也是可以将css文件当做一个一个的模块的，所以，我们就需要对css模块的处理进行配置。

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

　　其中的css-loader作用是使得webpack寻找css文件，style-loader的作用是为了使得css嵌入到html中。

　　webpack.config.js配置如下所示：

　　

{
test: /\.css$/,
loader: 'style-loader!css-loader'
}

　　

　　接着我们就可以使用require()的方式引入css文件了。

　　

　　

　　如果我们希望使用less，那么我们就可以使用less-loader来处理了。 最终的代码如下：

module.exports = {
entry: ["./index.js"],
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
watch: true,
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}
]
}
}

　　

　　之前我在网上搜了很多的博客，每个人的说法似乎都不一致，并且都是只有自己才可以理解的，所以，在安装less这一步上我就浪费了不少的时间，而这次的效率之低让我意识到了这样的问题：

　　在寻找解决方案时，应该从源头上去寻找，比如：

　　这里的解决方案是从： https://doc.webpack-china.org/loaders/less-loader/ 这个网站上找到的，这里正是官方文档，是根源，他人写的所有的博客，其实最终也都是基于此而出现的