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