vue.js - webpack打包时postcss-px2rem为什么不能解析vue模板内的sass？

问题描述

问 题

vue模板内的style是sass写的，然后我想用postcss-px2rem（https://github.com/songsiqi/p...）进行单位转换，可是sass并没有进行单位转换。

webpack.conf.js

var path = require('path'), // NodeJS中的Path对象，用于处理目录的对象，提高开发效率。
    webpack = require('webpack'),
    px2rem = require('postcss-px2rem');

// 模块导入
module.exports = {
    // 入口文件地址，不需要写完，会自动查找
    entry: [
        path.resolve(__dirname, './src/app/main.js')
    ],
    // 输出
    output: {
        // 文件地址，使用绝对路径形式
        path: path.resolve(__dirname, './app/js'),
        //[name]这里是webpack提供的根据路口文件自动生成的名字
        filename: '[name].js',
        // 公共文件生成的地址
        publicPath: '../../app/js/',
        chunkFilename: "[name].[chunkhash].js",
    }
    ...
    externals: {
        "vue": "Vue", // 对应文件里面的global.Vue
        "vue-router": "VueRouter",
        "vue-resource": "VueResource"
    },
 
    // 加载器
    module: {
        // 加载器
        loaders: [
        // 解析.vue文件
            { test: /\.vue$/, loader: 'vue' },
            { test: /\.css$/, loader: 'style-loader!css-loader!postcss-loader'},
            { test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader!postcss-loader'},
            { test: /\.less$/, loader: 'style-loader!css-loader!less-loader!postcss-loader'},
        ]
    },
    postcss: function() {
        return [px2rem({remUnit: 34.5})];
    },
    vue: {
        loaders: {
            postcss: [require('postcss-px2rem')({remUnit: 34.5})]
        }
    },
     // 转化成es5的语法
    babel: {
      "presets": [
        "es2015",
        "stage-2"
      ],
      "plugins": [
        "transform-runtime",
        "transform-async-generator-functions"
      ],
      "comments": false
    }
    ...
};

package.json

{
  "dependencies": {
    "vue": "^1.0.21"
  },
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-async-generator-functions": "^6.17.0",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-2": "^6.17.0",
    "babel-runtime": "^6.11.6",
    "clean-webpack-plugin": "^0.1.13",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.23.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.4",
    "file-saver": "^1.3.1",
    "function-bind": "^1.0.2",
    "gulp-babel": "^6.1.2",
    "gulp-htmlmin": "^2.0.0",
    "gulp-less": "^3.1.0",
    "gulp-pixrem": "^1.0.0",
    "gulp-replace": "^0.5.4",
    "gulp-uglifyjs": "^0.6.2",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.12.0",
    "json-loader": "^0.5.4",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "md5": "^2.1.0",
    "mockjs": "^1.0.1-beta2",
    "node-sass": "^3.10.1",
    "ora": "^0.2.0",
    "path": "^0.12.7",
    "postcss": "^5.2.5",
    "postcss-loader": "^1.1.0",
    "postcss-px2rem": "^0.3.0",
    "sass-loader": "^4.0.2",
    "shelljs": "^0.6.0",
    "url-loader": "^0.5.7",
    "vue-hot-reload-api": "^1.2.0",
    "vue-html-loader": "^1.0.0",
    "vue-loader": "^8.3.0",
    "vue-resource": "^0.9.3",
    "vue-router": "^0.7.13",
    "vue-style-loader": "^1.0.0",
    "vuex": "^1.0.0",
    "vux": "^0.1.3",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-dev-server": "^1.16.2",
    "webpack-hot-middleware": "^2.6.0",
    "webpack-merge": "^0.8.3"
  }
}

vue模板

<template>
...
</template>

<script>
...
</script>

<style lang="sass?outputStyle=expanded">
$headerHeight: 48px;
$leftWidth: 10px;
$headerColor: #35495e;
$backColor: #C8C8CD;

.xheader {
    position: relative;
    background: $headerColor;
    height: $headerHeight;

    .xheader__title {
        font-size: 18px;
        font-weight: 400;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #fff
    }

    .xheader__btn_refresh, .xheader__btn_back {
        width: $headerHeight;
    }
}

.icon__left{
    display: inline-block;
    height: $leftWidth;
    width: $leftWidth;
    border-width: 2px 2px 0 0;
    border-color: $backColor;
    border-style: solid;
    transform: rotate(225deg)
}
</style>

解决方案

I figure it out ! Just some detail i miss in http://vue-loader.vuejs.org/e... It should be

vue: {
    postcss: [require('postcss-px2rem')({remUnit: 34.5})]
}

rather than

vue: {
        loaders: {
            postcss: [require('postcss-px2rem')({remUnit: 34.5})]
        }
    },

I figured this for 5 hours ! GO FUCK MYSELF

这篇关于vue.js - webpack打包时postcss-px2rem为什么不能解析vue模板内的sass？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！