Skip to content

Instantly share code, notes, and snippets.

@shisama
Last active October 19, 2017 15:15
Show Gist options
  • Save shisama/04042cb4e578c3332b893e9965ddcf8d to your computer and use it in GitHub Desktop.
Save shisama/04042cb4e578c3332b893e9965ddcf8d to your computer and use it in GitHub Desktop.
comile sass to css with autoprefixer and webpack
{
"name": "sass-autoprefixer-sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build-css": "rm -rf public && webpack --debug --config webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.1.5",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.1",
"node-sass": "^4.5.3",
"postcss-loader": "^2.0.8",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"webpack": "^3.8.1"
}
}
.sample {
color: #00008B;
font-size: large;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-image: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
background-image: linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
@charset "UTF-8"
$darkblue: #00008B
.sample
color: $darkblue
font-size: large
display: flex
background-image: linear-gradient(left, red, orange, yellow, green, blue, indigo, violet)
user-select: none
"use strict"
const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const autoprefixer = require("autoprefixer");
module.exports = {
entry: {
sample: path.join(__dirname, "src/css/sample.sass"),
},
output: {
path: path.join(__dirname, "public/css"),
filename: "[name].css"
},
module: {
rules: [
{
test: /\.s[ac]ss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
"css-loader",
{loader: 'postcss-loader', options: { plugins: [autoprefixer({browsers: [">= 0.1%"]})]}},
"sass-loader"
]
})
}
]
},
plugins: [
new ExtractTextPlugin({ filename: '[name].css', disable: false, allChunks: true })
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment