Style import prepender for webpack, prepends defined style files on build(scss, stylus, css).
This will prepend the defined files to every file that is matched by the loader. Perfect to remove tedious variables and mixins imports while using design patters like css-modules or other techniques that isolates style scopes.
The example below will import variable.styl and mixnin.styl and prepend import statements for each file. This allows .styl files to use "global" variables and mixins, which are not defined within the same file.
npm install prepend-style-loader
Multiple files:
{
loader: 'prepend-style-loader',
options: {
prepend: [
path.resolve('src/resources/global/variables'),
path.resolve('src/resources/global/mixins')
]
}
}Single file:
{
loader: 'prepend-style-loader',
options: {
prepend: path.resolve('src/resources/global/mixins')
}
}Styl example
{
rules: {
loaders: [
{
test: /\.styl$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
camelCase: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
{
loader: 'stylus-loader'
},
{
loader: 'prepend-style-loader',
options: {
prepend: [
path.resolve('src/resources/global/variables'),
path.resolve('src/resources/global/mixins')
]
}
}
]
}
]
}
}Run demo
git clone [email protected]:JoelRoxell/prepend-style-loader.git
npm link prepend-style-loader
yarn demo
open demo/build/index.html
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent