Vue初学27-webpack样式文件的配置

1.css文件的配置

如果要在打包的时候，将前端用到的css样式文件一起打包，需要安装相应的loader。

新建一个main.css

body{
    background-color: #0000aa;
}

在main.js中添加如下代码，引用该css文件

require('./css/main.css')

 如果直接通过nmp run build打包，会报错，需要安装相应的loader。

首先，安装css-loader

通过命令：npm install --save-dev css-loader，安装开发版的css-loader。

执行完成后，在package.json的devDependencies节点中，会自动添加css-loader和相应的版本。

在webpack.config.js的module.exports中需要添加module配置信息：  

    module: {
        rules: [
            {
                //css-loader负责css文件的加载
                //style-loader负责将样式渲染到dom
                //从右到左，先加载css-loader再加载style-loader
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }

可以看到除了css-loader还有style-loader。 css-loader负责css文件的加载，style-loader负责将样式渲染到dom，因此，还要安装style-loader。use: [ 'style-loader', 'css-loader' ]配置中style-loader在左，css-loader在右，但是加载的顺序是从右到左，先加载css-loader再加载style-loader。

通过命令：npm install style-loader --save-dev ，安装开发版的style-loader。

安装完成后，main.css就可以正常打包了。

2.less文件的配置

如果样式文件采用的是less文件，同样也需要安装相应的loader。

新建一个common.less

@fontSize:22px;
@fontColor:white;

body{
  font-size:@fontSize;
  color:@fontColor;
}

在main.js 中引用这个less文件

require('./css/common.less')

安装less-loader和less

通过命令：npm install --save-dev less-loader less ，安装less-loader和less

安装完成后，在webpack.config.js中添加如下配置：

           {
                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
                }]
            }

完整的webpack.config.js配置如下：

const path = require('path');
module.exports={
    //打包的入口，可以是字符串，数组，对象，可以是相对路径
    entry:'./src/main.js',
    //出口通常为一个对象，至少要包含path和filename两个属性，必须是绝对路径
    output:{
      path:path.resolve(__dirname,'dist'),
      filename:'bundle.js'
    },
    module: {
        rules: [
            {
                //css-loader负责css文件的加载
                //style-loader负责将样式渲染到dom
                //从右到左，先加载css-loader再加载style-loader
                test: /\.css$/,
                use: [ '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
                }]
            }
        ]
    }
};

通过npm run build命令打包，报错

问题主要出在common.less的打包， 可能是less或者less-loader版本的问题，因为webpack安装的时候，指定了低版本。

指定下less-loader和less的版本，重新安装，执行命令：npm install --save-dev less-loader@4.1.0 less@3.9.0 

完成后，重新打包，问题解决。

运行后效果如下：main.css和common.less都起作用了。