Compiles SCSS for the Stencil Framework
The npm package @bigcommerce/stencil-styles is an essential tool for developers working with the BigCommerce Stencil framework, particularly for those looking to seamlessly compile SCSS files. This node module enhances the development process by providing on-the-fly compilation of SCSS, allowing developers to see immediate changes and streamline their workflow. By using @bigcommerce/stencil-styles, developers can maintain a smooth and efficient pipeline from development to production, ensuring that their storefronts are both visually appealing and performant. The key benefit of this package lies in its ability to integrate directly into the Stencil framework, making it a specialized tool that maximizes the frameworkâs capabilities.
To get started with this powerful tool, developers can simply run the command `npm install @bigcommerce/stencil-styles` in their project environment. This installation process integrates the module into the Stencil project, setting up developers for immediate success in compiling their custom SCSS. The ease of installation and setup means that developers can quickly begin enhancing their site aesthetics with robust, custom styles tailored to their specific needs. Additionally, @bigcommerce/stencil-styles supports the latest SCSS features and syntax, ensuring that developers are always at the cutting edge of web design technologies. This capability allows for the creation of dynamic, responsive, and visually intricate designs that can adapt across different devices and platforms.
The module not only boosts the visual aspects of an e-commerce site but also contributes to better site performance through optimized style sheets. This optimization reduces the load times and enhances the user experience, which is crucial for maintaining customer satisfaction and improving conversion rates. By leveraging the @bigcommerce/stencil-styles package, developers can achieve a higher level of control and quality over the appearance and feel of their online stores, directly contributing to the brand's success and visibility online.
Core dependencies of this npm package and its dev dependencies.
autoprefixer, cheerio, lodash, node-sass, postcss, recursive-readdir, sass, @hapi/code, @hapi/lab, eslint, sinon
A README file for the @bigcommerce/stencil-styles code repository. View Code
This is assuming you are using Glue and have added stencil-styles to your manifest file
const StencilStyles = require('@bigcommerce/stencil-styles');
const stencilStyles = new StencilStyles;
stencilStyles.compile(compiler, {
data: '', //Initial SCSS content,
files: {}, //An object of all files needed to compile using key as the path name and val as the content
dest: '', // `dest` option for SCSS
themeSettings: {}, // Flat object of arbitrary settings that can be used by the stencil sass functions
autoprefixerOptions: { // Autoprefixer Options
cascade: true,
browsers: ["> 5% in US"]
}
}, (err, css) => {
// `css` will be the compiled SCSS
});
Copyright (c) 2015-present, Bigcommerce Inc. All rights reserved.
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
THIS SOFTWARE IS PROVIDED BY BIGCOMMERCE INC ''AS IS'' AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL BIGCOMMERCE INC BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.