webpack 编译less/scss文件

1、安装插件

处理less:

npm install less-loader --save-dev

处理sass:

npm install sass-loader --save-dev

2、项目目录:

layer.less为:

.layer{
    width: 600px;
    height: 200px;
    background-color: green;
    > div{
        width: 400px;
        height: 200px;
        background-color: red;
    }
    .flex{
        display: flex;
    }
}

layer.js为:

import ‘./layer.less‘;
//import tpl from ‘./layer.html‘;
function layer(){
    return {
        name:‘layer‘,
        tpl:tpl
    }
}
export default layer;

3、webpack.config.js配置文件(以编译less为例)

var htmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports = {
    entry: ‘./src/app.js‘,
    output: {
        path: __dirname + ‘/dist‘,
        filename: ‘js/[name].js‘
    },
    module: {
        loaders: [{
                test: /\.js$/,
                //以下目录不处理
                exclude: /node_modules/,
                //只处理以下目录
                include: /src/,
                loader: "babel-loader",
                //配置的目标运行环境(environment)自动启用需要的 babel 插件
                query: {
                    presets: [‘latest‘]
                }
            },
            //css 处理这一块
            {
                test: /\.css$/,
                use: [
                    ‘style-loader‘,
                    {
                        loader: ‘css-loader‘,
                        options: {
                            //支持@important引入css
                            importLoaders: 1
                        }
                    },
                    {
                        loader: ‘postcss-loader‘,
                        options: {
                            plugins: function() {
                                return [
                                    //一定要写在require("autoprefixer")前面,否则require("autoprefixer")无效
                                    require(‘postcss-import‘)(),
                                    require("autoprefixer")({
                                        "browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"]
                                    })
                                ]
                            }
                        }
                    }
                ]
            },
            //less 处理这一块
            {
                test: /\.less$/,
                use: [‘style-loader‘,
                    {
                        loader: ‘css-loader‘,
                        options: {
                            //支持@important引入css
                            importLoaders: 1
                        }
                    },
                    {
                        loader: ‘postcss-loader‘,
                        options: {
                            plugins: function() {
                                return [
                                    //一定要写在require("autoprefixer")前面,否则require("autoprefixer")无效
                                    require(‘postcss-import‘)(),
                                    require("autoprefixer")({
                                        "browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"]
                                    })
                                ]
                            }
                        }
                    },
                    ‘less-loader‘
                ]
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: ‘index.html‘,
            filename: ‘index.html‘
        })
    ]
}

注意:postcss-loader在css-loader后,在less-loader前。

4、执行编译&查看效果

npm run webpack

时间: 2024-11-12 17:15:37

webpack 编译less/scss文件的相关文章

webpack单独构建scss文件与.vue组件里构建scss的一个坑

在入口main.js里构建scss是通过引入模块的方式 import './assets/_reset.scss'; import './assets/_flex.scss'; import './assets/_functions.scss'; 在.vue组件里是单独构建的 <style lang="scss" scoped> img { width: rem(300px); } #product, .gallery, .detail { width: rem(750px

关于webpack编译scss文件

css加载器文件通常和extract-text-webpack-plugin一块使用,我们可以在源文件src目录下写scss文件,然后通过webpack编译成css文件到输出目录public,这个目录就是我们网站需要引用的目录. 1 var webpack = require('webpack'); 2 var HtmlWebpackPlugin = require('html-webpack-plugin'); 3 var ExtractTextWebpackPlugin = require(

解决webpack不能编译scss文件中的-webkit-box-orient:vertical问题

最近项目遇到一个问题: 处理多行文本溢出的样式,但是在webpack编译之后,-webkit-box-orient:vertical 这个样式丢失了 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; 解决方法: /*!autoprefixer:off*/ -webkit-box-orient: vertical;

@angular/cli 工程中使用scss文件

如果你创建工程项目用angular-cli 你的样式文件想使用scss, 并且让ng serve自动编译它们 你可以在创建项目的时候用 ng new sassy-project --style=sass 或者通过ng set defaults.styleExt scss 来修改你现有的项目 然后修改.angular-cli.json的 "styles": [    "styles.css" // "styles.scss" ] 和componen

Vue 融入flexible.js scss(sass)文件 添加scss文件 sass

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "He

Webpack编译速度优化实战

当你的应用的规模还很小时,你可能不会在乎Webpack的编译速度,无论使用3.X还是4.X版本,它都足够快,或者说至少没让你等得不耐烦.但随着业务的增多,嗖嗖嗖一下项目就有上百个组件了,也是件很简单的事情.这时候当你再独立编前端模块的生产包时,或者CI工具中编整个项目的包时,如果Webpackp配置没经过优化,那编译速度都会慢得一塌糊涂.编译耗时10多秒钟的和编译耗时一两分钟的体验是迥然不同的.出于开发时的心情的考虑,加上不能让我们前端的代码编译拖累整个CI的速度这两个出发点,迫使我们必须去加快

scss文件报错处理 (报错信息Invalid CSS after &quot;v&quot;: expected 1 selector or at-rule, was &#39;var api = require)

error in ./src/assets/styles/app.scss Module build failed: @import "./reset.scss"; ^ Invalid CSS after "v": expected 1 selector or at-rule, was 'var api = require("' in /Users/aa/demo/new/src/assets/styles/app.scss (line 1, column

Android NDK 编译加入so文件

在cocos2d-x中集成百度语音识别的时候,运行build_native.py会把libs/armeabi目录清空. 以下是解决办法,把so文件放在jni/prebuilt里面. 修改Android.mk文件,主要有两行include $(CLEAR_VARS) LOCAL_PATH := $(call my-dir) include $(CLEAR_VARS) #百度语音识别so LOCAL_MODULE := BDVoiceRecognitionClient_V1 LOCAL_SRC_FI

模块之字节编译的.pyc文件---from.import语句

字节编译的.pyc文件输入一个模块相对来说是一个比较费时的事情,所以Python做了一些技巧,以便使输入模块更加快一些.一种方法是创建 字节编译的文件 ,这些文件以.pyc作为扩展名.字节编译的文件与Python变换程序的中间状态有关(是否还记得Python如何工作的介绍?).当你在下次从别的程序输入这个模块的时候,.pyc文件是十分有用的——它会快得多,因为一部分输入模块所需的处理已经完成了.另外,这些字节编译的文件也是与平台无关的.所以,现在你知道了那些.pyc文件事实上是什么了. ~~~~