给kbone项目添加sass转换功能

使用 kbone-cli创建的项目默认只有 css 和 less，并不支持 sass ，因此本文主要描述下在 kbone 中引入 sass。

 

1、首先在项目中安装 node-sass 和 sass-loader

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

　  node-sass 比较难安装，经常会报各种错误。

 

2、在 webpack.config.dev.js 和 webpack.config.prod.js 配置文件中新增 sass 打包配置

// 修改前
module: {
    ...
    {
            test: /\.less$/,
            use: [
                'style-loader',
                'css-loader',
                'less-loader'
            ]
     },
    // "postcss" loader applies autoprefixer to our CSS.
    // "css" loader resolves paths in CSS and adds assets as dependencies.
    // "style" loader turns CSS into JS modules that inject <style> tags.
    // In production, we use a plugin to extract that CSS to a file, but
    // in development "style" loader enables hot editing of CSS.
    {
       test: /\.css$/,
       use: [
          require.resolve('style-loader'),
          ...
       ]
     }
     ...
}


// 修改后
module: {
    ...
    {
            test: /\.less$/,
            use: [
                'style-loader',
                'css-loader',
                'less-loader'
            ]
     },
     {
            test: /\.scss$/,
            use: [
                'style-loader',
                'css-loader',
                'sass-loader'
            ]
      },
    // "postcss" loader applies autoprefixer to our CSS.
    // "css" loader resolves paths in CSS and adds assets as dependencies.
    // "style" loader turns CSS into JS modules that inject <style> tags.
    // In production, we use a plugin to extract that CSS to a file, but
    // in development "style" loader enables hot editing of CSS.
    {
       test: /\.css$/,
       use: [
          require.resolve('style-loader'),
          ...
       ]
     }
     ...
}

　　注：在 less 的配置后面新增 sass 配置就可以了，红色为新增代码。

 

3、webpack.mp.config.js 小程序打包配置文件

// 改动前

module: {
    rules: [
        {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ],
        },
        ...
    ]
}


// 改动后
module: {
    rules: [
        {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ],
        },
        ...
        {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
        },
        ....
    ]
}
    

　　注：在 less 或者 css 的加载器后面添加换行配置即可。

 

4、完成