react&webpack使用css、less && 安裝原則 --- 從根本上解決問題。

標籤：代碼   網站   class   pre   標籤   sla   nbsp   嵌入   web   

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

 

 

　

 

react&webpack使用css、less && 安裝原則 --- 從根本上解決問題。