cssプリコンパイルsass+autoprefixer

1596 ワード

足場:https://github.com/zhuweileo/autoprofixer-temp

webpackプロファイル

var webpack = require('webpack')
var path = require('path')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var autoprefixer = require('autoprefixer')
module.exports = {
    entry: path.join(__dirname, "js/index.js"),
    output: {
        path: path.join(__dirname, "../public"),
        filename: "js/index.js"
    },
    module: {
        rules: [{
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: ["css-loader", "sass-loader", "postcss-loader"]
                // use: ["css-loader", "sass-loader" ]
            }) //  css           
        }],
    },  
    plugins: [
        new ExtractTextPlugin("css/index.css")
    ]
};

に従う必要があるモジュール:

"devDependencies": {
    "autoprefixer": "^7.1.1",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^2.1.2",
    "node-sass": "^4.5.3",
    "postcss-loader": "^2.0.5",
    "sass-loader": "^6.0.5",
    "style-loader": "^0.18.2",
    "webpack": "^2.6.1"
  }

postcssを使用するautoprefixerは、scssファイルが必要なフォルダ内にpostcssを1つ置く必要がある.config.jsファイルの内容は以下の通りです:

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

擬似クラスによるフローティングのクリア

extjs tabpanel動的パネル追加