webpack编译打包scss

依赖

webpack编译scss需要用到这几个loader:style-loader,css-loader,postcss-loader,sass-loader以及插件:extract-text-webpack-plugin

安装相关loader和插件:

npm install style-loader css-loader postcss-loader sass-loader extract-text-webpack-plugin

postcss-loader

postcss-loader是为了兼容多个浏览器需要在一些css上添加兼容前缀。在项目下添加postcss.config.js,内容如下:

module.exports = {
 plugins: [
  require('autoprefixer')({ /* ...options */ })
 ]
}

webpack.config.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
 entry: {
  entry: __dirname + '/app/main.js',
 },

 resolve: {
  extensions: ['.js','.css', '.scss', '.html'],
 },

 module: {
  rules: [
   {
    test: /\.html$/,
    loader: 'html-loader'
   },
   {
    test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
    loader: 'file-loader?name=assets/[name].[hash].[ext]'
   },
   {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract({
     fallbackLoader: 'style-loader',
     loader: ['css-loader?minimize!postcss-loader']
    })
   },
   {
    test: /\.(scss|sass)$/,
    loader: ExtractTextPlugin.extract({
      fallbackLoader: 'style-loader',
      loader: ['css-loader?minimize','postcss-loader', 'sass-loader']
     })
   }
  ]
 },

 plugins: [
  new ExtractTextPlugin({
      filename: '[name].[contenthash:5].css',
      allChunks: true
    })
 ]
};

需要注意的是:配置scss编译的loader是从右到左执行:

  1. 先执行sass-loader ,把scss文件编译为css
  2. 接着执行postcss-loader,为css添加兼容相关的前缀
  3. 最后执行css-loader,在css-loader后加了minimize参数,是为了压缩css
  4. 如果失败,默认执行style-loader 

版权声明:著作权归作者所有。

相关推荐

基于webpack的vue项目使用别名避免../深路径

在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件:import userinfo from '../../../components/userinfo.vue'; 使用../引用的路径比较深,定位路径和书写不方便,并且不直观。由于项目是基于webpack,比较好的做法是使用webpack对路径定义一个别名。在webpack.base.config.js找到resolve节

使用webpack构建vue项目

简单记录下使用webpack构建vue项目。环境依赖1、安装vueyarn add vue 2、安装webpack相关开发包yarn add webpack babel-core babel-loader babel-preset-env --dev 3、安装vue-loader和vue-template-compil

配置JVM查看JIT编译机器码

JVM配置查看JIT编译机器码的选项:-XX:+UnlockDiagnosticVMOptions -XX:+PrintAssembly 查看特定的方法-XX:+UnlockDiagnosticVMOptions -XX:CompileCommand=print,*MyClass.myMethod

Angular CLI在Angular项目里使用scss

Angular CLI支持多种css预处理,包括:cssscsslesssassstyl (stylus)默认值为css。Angular有两种方式指定css预处理。下面以scss为例:新建项目指定css预处理在新建angular项目是使用--style指定css预处理ng new my-project --style=scss 已有项目指定css预

Android dex文件反编译为Java源码

工具准备 dex2jar:国人写的一个dex反编译为java的工具jd-gui:查看java源码的gui工具反编译步骤步骤一把test_apk-debug.apk里的classes.dex转换为test_apk-debug_dex2jar.jard2j-dex2jar.sh -f -o output_jar.jar apk_to_decompile.apk