美文网首页
webpck处理css预处理文件less,sass等

webpck处理css预处理文件less,sass等

作者: 飞飞廉 | 来源:发表于2018-01-11 20:49 被阅读0次

1、首先安装style-loader css-loader

npm i style-loader css-loader --save-dev

配置文件:

    test:/\.css$/,
    loader:'style-loader!css-loader' 

需要在样式中设置现在浏览器不是很支持的属性,比如flex,这是需要加浏览器前缀,此时用到postcss-loader,先安装

npm i  postcss-loader --save-dev

通过配置options来设置插件,记得安装。

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path')

module.exports = {
    entry: './src/app.js',
    output: {
        path: __dirname + '/dist',
        filename: 'js/[name].bundle.js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            loader: 'babel-loader',
            // exclude:__dirname+'node_modules',//不对这个进行babel转换,这里边已经打包好,这样能减少打包时间
            // include:__dirname+'src',
            exclude: path.resolve(__dirname, 'node_modules'),
            include: path.resolve(__dirname, 'src'),
            query: { //若在package.json中定义了这个presets,则这边可以删掉
                presets: ['latest']
            }
        }],
        rules: [{
                test: /\.css$/,
                use: [
                    'style-loader',
                    { loader: 'css-loader', options: { importLoaders: 1 } }, //1这个number指的是在css-loader之后引用几个loader来处理import进来的文件
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('postcss-import')(),
                                require('autoprefixer')({//浏览器前缀
                                    browsers: ['last 5 versions']
                                })
                            ]
                        }
                    }
                ]
            },
            {
                test:/\.less$/,//在前边css匹配中设置了importLoaders后,在less匹配时不用在配置
                use:[
                'style-loader',
                'css-loader',
                {loader:'postcss-loader',options:{
                    plugins: [
                                require('autoprefixer')({//浏览器前缀
                                    browsers: ['last 5 versions']
                                })
                            ]
                        }},
                'less-loader'
                ]
            },
            {
                test:/\.scss$/,//在前边css匹配中设置了importLoaders后,在less匹配时不用在配置
                use:[
                'style-loader',
                'css-loader',
                {loader:'postcss-loader',options:{
                    plugins: [
                                require('autoprefixer')({//浏览器前缀
                                    browsers: ['last 5 versions']
                                })
                            ]
                        }},
                'sass-loader'
                ]
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: 'body',
            title: 'this is a complete webpack demo'
        })
    ]
}

相关文章

  • webpck处理css预处理文件less,sass等

    1、首先安装style-loader css-loader 配置文件: 需要在样式中设置现在浏览器不是很支持的属性...

  • Sass和Less

    什么是Sass和Less? Sass和Less都属于CSS预处理器。 什么是 CSS 预处理器呢? CSS 预处理...

  • less语法和rem媒体查询的使用

    常见CSS预处理器:Less / SASS / Stylus等。 Less预处理器:使用CSS语法,可以做一些逻辑...

  • 为什么选择Sass而不是Less?

    什么是Sass和Less? Sass和Less都是属于CSS的预处理器,那什么是预处理器呢? CSS预处理器定义了...

  • Sass

    Sass是CSS的预处理工具 CSS的预处理工具有Sass、Less、Stylue。 .sass与.scss的区别...

  • Sass学习笔记

    ​ Sass是使用Ruby语言编写的css预处理语言,诞生于2007年。Sass, LESS, stylus等...

  • Sass和Less

    saas和less sass和less是什么? Saas和Less都属于css预处理器,css预处理器定义了一种新...

  • scripts+commonjs+gulp

    css预处理器 Sass https://www.sass.hk/ LESS Stylus Sass 嵌套 嵌套规...

  • sass

    css预处理器 Sass https://www.sass.hk/ LESS Stylus Sass 嵌套 嵌套规...

  • CSS预处理器入门介绍:Sass、Less 和 Stylus

    css 预处理器:Sass、Less 和 Stylus 【Sass】 扩展名:「 *.sass 」和「 *.scs...

网友评论

      本文标题:webpck处理css预处理文件less,sass等

      本文链接:https://www.haomeiwen.com/subject/gdwonxtx.html