webpack的css處理

webpack打包處理css的時候需要兩個loader:

style-loader 和css-loader

安裝：

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

style-loader：負責將打包生成的代碼嵌入到html頁面中.

css-loader:是允許將css文件引入到.js文件中；

簡單的打包css的webpack.config.js文件：

var path = require('path')
module.exports = {
    entry:{
        app:'./src/app.js'
    },
    output: {
        path:path.resolve(__dirname,'dist'),
        publicPath: "./dist/",
        filename: "[name].bundle.js"
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    {
                        loader:'style-loader',//在html頁面中插入<style>標簽；
                        // options:{
                        //     insertInto:'#app',//將打包成的style標簽插入app
                        //     singlleton:true,//只生成一個style標簽
                        //     transfrom:'./css.transform.js'//css的變形，它會在打包生成的標簽插入html頁面的時候生效，因此還可以獲取瀏覽器的相關信息
                        // }
                       // loader:'style-loader/url'//會在頭部插入<link>標簽//如果打包多個文件會生成 多個link，影響性能，推薦使用上一種；
                        //loader:"style-loader/useable"//控制樣式插入或者不插入頁面中；

                    },
                    {
                        loader:'css-loader',
                        // loader:'file-loader',
                        options:{
                            minimize:true,
                            modules:true//開啟了modules，在js中引入css文件以后，就可以導出css文件，點.出css文件中的內容；
                        }
                    }
                ]
            }
        ]
    }
}

 

style-loader:有一個options配置，包括：

　　1.inserAt:形成的標簽插入的位置；

　　2.insertInto:插入到dom

　　3.singleton:true/false是否只使用一個style標簽

　　4.transform:轉化，是在瀏覽器環境下生效，插入頁面之前；可以進行和瀏覽器相關的頁面樣式操作

如：css.transform.js文件：

module.exports = function (css) {
    console.log(css)
    console.log(window.innerWidth)
    if(window.innerWidth >= 768){
        return css.replace('red','green')
    }else{
        return css.replace('red','orange')
    }
}

style-loader的兩個同類：

　　1.style-loader/url：是將打包的代碼以Link的形式插入到頁面中；

　　2.style-loader/useable：是否允許插入引入的文件，在.js中使用

css的options配置項：

　　1.alias(解析的別名）

　　2.importLoader(@import)

　　3.Minimize(是否壓縮）

　　4.modules(啟用css-modules)

css-Modules的參數：

　　1.：local

　　2.global

　　3.compose

　　4.compose...from path

compose使用代碼：

.box  {
    composes: bigBox from './common.css';//為了優先級，默認將引入的寫入到括號中的第一行
    width: 200px;
    height: 200px;
    background: skyblue;
    border-radius:5%;
}

 less與sass配置：

安裝：

npm install less-loader less --save-dev
npm install sass-loader node-sass --save-dev

配置代碼：

 rules:[
            {
                test:/\.less$/,
                use:[
                    {
                        loader:'style-loader',//在html頁面中插入<style>標簽；
                        // options:{
                        //     insertInto:'#app',//將打包成的style標簽插入app
                        //     singlleton:true,//只生成一個style標簽
                        //     transfrom:'./css.transform.js'//css的變形，它會在打包生成的標簽插入html頁面的時候生效，因此還可以獲取瀏覽器的相關信息
                        // }
                       // loader:'style-loader/url'//會在頭部插入<link>標簽//如果打包多個文件會生成 多個link，影響性能，推薦使用上一種；
                        //loader:"style-loader/useable"//控制樣式插入或者不插入頁面中；

                    },
                    {
                        loader:'css-loader',
                        // loader:'file-loader',
                        options:{
                            minimize:true,
                            modules:true//開啟了modules，在js中引入css文件以后，就可以導出css文件，點.出css文件中的內容；
                        }
                    },
                    {
                        loader:'less-loader'
                    }
                ]
            }
        ]

 二.提取css ----- 使用插件

　　安裝：

 npm install --save-dev extract-text-webpack-plugin

使用：

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}