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/ 這個網站上找到的，這裏正是官方文檔，是根源，他人寫的全部的博客，其實最終也都是基於此而出現的