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
webpack 编译less/scss文件的更多相关文章
- webpack单独构建scss文件与.vue组件里构建scss的一个坑
在入口main.js里构建scss是通过引入模块的方式 import './assets/_reset.scss'; import './assets/_flex.scss'; import './a ...
- webpack 编译html模板文件
1.项目结构 安装loader: npm i html-loader --save-dev npm i ejs-loader --save-dev 2.模板文件layer.html <div c ...
- 关于webpack编译scss文件
css加载器文件通常和extract-text-webpack-plugin一块使用,我们可以在源文件src目录下写scss文件,然后通过webpack编译成css文件到输出目录public,这个目录 ...
- WebPack系列:Webpack编译的代码如何在tomcat中使用时静态资源路径不对的问题如何解决
问题: 使用webpack+vue做前端,使用tomcat提供api,然后npm run build之后需要将编译,生成如下文件: | index.html \---appserver ...
- Visual Studio 2017中使用gulp编译sass/scss
在Visual Studio 2017中使用gulp编译sass/scss文件 需要的环境:Visual Studio 2017.Node.js.npm 在vs2017中 [视图]-[其他窗口]-[任 ...
- koala编译scss文件时不支持中文字体的解决方案
第一种方案:在scss文件第一行加上这行代码@charset "utf-8"; 第二种方案: scss文件编译时候使用ruby环境,出现 Syntax error: Invalid ...
- Compass 编译.scss文件的问题
compass 命令编译scss文件存在一个问题: 不能对"_"下划线开头的scss文件名称的文件进行编译.将"_"去掉就可以啦
- webpack打包处理html、css、js、img、scss文件
webpack --help 查看webpack命令启动服务 npm run dev (先配置好服务)进入对应文件夹并初始化npmcd demo npm init 安装webpack npm inst ...
- webstorm和intellij idea下如何自动编译sass和scss文件
webstorm和intellij idea下如何自动编译sass和scss文件 https://segmentfault.com/a/1190000008996504 https://www.jia ...
随机推荐
- [转]Android:异步处理之AsyncTask的应用(二)
2014-11-07 既然UI老人家都这么忙了,我们这些开发者肯定不能不识趣的去添乱阻塞UI线程什么的,否则UI界面万一停止响应了呢——这不是招骂的节奏么?!所以我们知道用Handler+Th ...
- IndiaHacks 2016 - Online Edition (Div. 1 + Div. 2) B. Bear and Compressing 暴力
B. Bear and Compressing 题目连接: http://www.codeforces.com/contest/653/problem/B Description Limak is a ...
- 2015 UESTC 数据结构专题D题 秋实大哥与战争 SET的妙用
D - 秋实大哥与战争 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/contest/show/59 D ...
- MyISAM重启之后的一次血泪教训
最近经历了一次MyISAM重启的血泪教训,小小的故障历经3个小时才全部解决完毕,特此铭记一下,以后坚决防止在同一个地方跌倒两次. 事情的过程: 某日早7点接到几条主库报警,给值班组打电话后得到的消息是 ...
- MySQL遇到的一个卡库问题及对update的学习
近日遇到个卡库的问题,环境是MySQL5.5.12,报错信息如下 ) and was aborted. There is a chan ce that your master is inconsist ...
- Vue学习记录-初探Vue
写在开头 2017年,部门项目太多,而且出现了一个现象,即:希望既要有APP,也能够直接扫码使用,也能放到微信公众号里面. 从技术角度来说,APP我们可以选择原生开发,也可以选择ReactNative ...
- 一步一步学习Vim 全图解释
转载:http://linux.chinaunix.net/techdoc/desktop/2009/01/03/1056322.shtml 一步一步学习Vim 全图解释 以下注释,根据图示和自己实践 ...
- 实现windows操作系统和VB下Linux虚拟操作系统相互传取文件方式总结
在windows上执行虚拟机跑的是Linux的操作系统,怎样才干在不同的操作系统之间传递文件呢? 这是本人切身体会到的,假设你没有好的方法的话.确实非常痛苦.下面是我个人的方法总结: 方法一.很好用的 ...
- Android 4.0 x86安装教程 附带联网参数详细设置
Android 4.0 x86是一个可以支持在电脑上运行的Android 4.0系统.没有手机一样也可以体验Android 4.0.这对玩机爱好者们来说也算得上是一个不大不小的好消息.不过目前的And ...
- 关于Gson在强转时的ClassCastException
关于Gson的坑人指出: 将list转化为json String beanListToJson = gson.toJson(list, type); 将json还原为list List<T &g ...