webpack+sass+vue 入门教程（三）

最新推荐文章于 2022-08-16 18:01:15 发布

weixin_30613727

最新推荐文章于 2022-08-16 18:01:15 发布

阅读量78

点赞数

原文链接：http://www.cnblogs.com/walls/p/6258974.html

版权

十一、安装sass文件转换为css需要的相关依赖包

npm install --save-dev sass-loader style-loader css-loader

loader的作用是辅助webpack将符合条件的源文件转换为对应的目标格式文件。比如index.scss转换成index.css
安装成功后，package.json文件变化如下：

1240
接着，安装extract-text-webpack-plugin，让webpack可以输出css格式的文件

npm install --save-dev extract-text-webpack-plugin

1240
安装成功后，提示需要node-sass做配合，所以下一步是安装node-sass

npm install --save-dev node-sass

安装node-sass会比较久，需要耐心等待
全部搞定后，package.json文件变化如下:

1240

十二、将app/css/index.css文件改为sass编译输出

在origin文件夹下，新增css.js文件，用于指定读取origin/css/index.scss文件
1240
1240

css.js文件内容如下:

require('./css/index.scss');

origin/css/index.scss文件内容如下

@charset "utf-8";
$colorRed : red;
$fontSize : 14px;
.demo{color:$colorRed;font-size:$fontSize;}

更新webpack配置文件webpack.config.js

var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var ExtractPlugin = require('extract-text-webpack-plugin');
module.exports = {
  // 配置入口
  entry: {
      '/js/index':__dirname +'/origin/origin.js',
      '/css/index':__dirname +'/origin/css.js'
  },
  // 编译后的文件路径
  output: {
      
    path: __dirname +'/app', // 文件路径
    filename: '[name].js' // 文件名称
  },
  module: {
    // 编译规则
    loaders: [
        // 配置sass编译规则
        {
            test:/\.scss$/,
            loader:ExtractPlugin.extract('style-loader', 'css-loader!sass-loader')
          }
    ]
  },
  // 辅助的插件
  plugins:[
    new BrowserSyncPlugin({
      host:'localhost', // 实时监听，webpack -w 可以实时更新硬盘中的文件js，css
      port:8080,
      file:'',
      server:{
        baseDir:'./app'
      }
    }),
    new ExtractPlugin('[name].css')
  ]
}

然后，启动webpack -w
1240
编译成功，再实时修改字体颜色为green

1240

十三、加入vue

1.安装vue，vue选择安装版本1.0.0

npm install --save-dev vue@1.0.0

2.安装babel的相关依赖包，可以编译最新标准的javascript。比如es6，es7。

npm install --save-dev babel-core babel-loader  babel-runtime babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0

3.更新webpack配置文件webpack.config.js

var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var ExtractPlugin = require('extract-text-webpack-plugin');
module.exports = {
  // 配置入口
  entry: {
      '/js/index':__dirname +'/origin/origin.js',
      '/css/index':__dirname +'/origin/css.js'
  },
  // 编译后的文件路径
  output: {
      
    path: __dirname +'/app', // 文件路径
    filename: '[name].js' // 文件名称
  },
  module: {
    // 编译规则
    loaders: [
        // 配置sass编译规则
        {
            test:/\.scss$/,
            loader:ExtractPlugin.extract('style-loader', 'css-loader!sass-loader')
        },
        {
            // 让webpack去验证文件是否是.js结尾将其转换
            test: /\.js$/,
            // 通过babel转换
            loader: 'babel',
            // 不用转换的node_modules文件夹
            exclude: /node_modules/,
            query: {
               'presets': ['es2015', 'stage-0'],
               'plugins': ['transform-runtime']
            }
        },
    ]
  },
  // 辅助的插件
  plugins:[
    new BrowserSyncPlugin({
      host:'localhost', // 实时监听，webpack -w 可以实时更新硬盘中的文件js，css
      port:8080,
      file:'',
      server:{
        baseDir:'./app'
      }
    }),
    new ExtractPlugin('[name].css')
  ]
}

修改origin/origin.js内容如下：

import Vue from 'vue'

new Vue({
  el: '#print',
  data: {
      message: "hello vue!"
  }
})

接着修改app/index.html内容如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>demo</title>
<link type="text/css" rel="stylesheet" href="./css/index.css" />
</head>
<body>
    <p id="demo" class="demo">hello world!</p>
    <p id="print">{{message}}</p>
    
    <script type="text/javascript" src="./js/index.js"></script>
</body>
</html>

启动webpack -w，查看浏览器结果

1240

到此，成功整合webpack+sass+vue！

原文入口:http://www.jianshu.com/p/4f280974f664

系列文章：
webpack+sass+vue 入门教程（一）
webpack+sass+vue 入门教程（二）

转载于:https://www.cnblogs.com/walls/p/6258974.html

weixin_30613727

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack+sass+vue 入门教程（三）

十一、安装sass文件转换为css需要的相关依赖包npm install --save-dev sass-loader style-loader css-loaderloader的作用是辅助webpack将符合条件的源文件转换为对应的目标格式文件。比如index.scss转换成index.css安装成功后，package.json文件变化如下：接着，安装extract-text-webp...
复制链接

扫一扫