[Deprecated] 🌈 Get your stylesheets together
MIT License
Get your stylesheets together . If you need sass + autoprefixer + webpack just do next:
npm i -D webpack webpack-dev-server sass-webpack-plugin html-webpack-plugin html-webpack-template
# or
yarn add -D webpack webpack-dev-server sass-webpack-plugin html-webpack-plugin html-webpack-template
// webpack.config.js
const SassPlugin = require('sass-webpack-plugin');
const HtmlPlugin = require('html-webpack-plugin');
const contentBase = path.join(__dirname, 'build');
module.exports = {
entry: './src/js/index.js',
plugins: [
new SassPlugin('./src/styles/index.scss', process.env.NODE_ENV),
new HtmlPlugin({
inject: false,
template: require('html-webpack-template'),
title: 'Sass webpack plugin',
links: [{ rel: 'stylesheet', type: 'text/css', href: '/index.css' }],
appMountId: 'app'
})
],
module: {
// babel, linter, etc
},
output: {
path: contentBase,
filename: 'index.js'
},
devServer: (process.env.NODE_ENV === 'production') ? false : {
contentBase: contentBase,
compress: true,
port: 3000
}
};
It's an all-in-one solution for sass + webpack without any limitations.
Here are the reasons to use sass-webpack-plugin over "x"-loader:
Here are reasons why sass-webpack-plugin is not the best case:
Webpack 2+. The work with webpack 1.x is not tested so it's up to you
// basic
new SassPlugin('./src/styles/index.scss');
// production ready
new SassPlugin('./src/styles/index.scss', process.env.NODE_ENV);
// multi files
new SassPlugin(['./src/styles/one.scss', './src/styles/two.sass'], process.env.NODE_ENV);
// a different output filename
new SassPlugin({ './src/styles/index.scss': 'bundle.css' }, process.env.NODE_ENV);
// with sass tuning
new SassPlugin('./src/styles/index.scss', process.env.NODE_ENV, {
sass: {
includePaths: [path.join(__dirname, 'node_modules/bootstrap-sass/assets/stylesheets')]
}
});
// with source maps + compressing - autoprefixing
new SassPlugin('./src/styles/index.scss', {
sourceMap: true,
sass: { outputStyle: 'compressed' },
autoprefixer: false
});
git checkout -b my-new-feature
)git commit -am 'Add some feature'
)git push origin my-new-feature
)SASS-webpack-plugin is released under the MIT License.