How can I define stylus options? #148
Comments
|
Hi @Phunky You can extend the webpack configuration via the module.exports = {
build: {
extend (config, { isDev, isClient }) {
// ...
}
}
}But where do you want to write your |
|
Thank you for the pointer, I didn't stumble on to anything regarding extending webpack config - guess I need to RTFM better. As for where I write my import, it's within module.exports = {
build: {
extend (config, { isDev, isClient }) {
config.stylus = {
import: ['~stylus/common.styl']
}
}
}
} |
|
No worries @Phunky, the documentation is not finished yet! |
|
Oh sadly what I posted above doesn't work, i'm seeing the following;
I'm guessing it's to do with the changes in Webpack 2.2.0 |
|
Still struggling with this, i've looked at option plugins and other various parts of webpack but had no luck at all :( Only way i've got it working so far is to dive in to style-loader in node_modules and add it to the import array directly, this obviously isn't a good idea :D |
|
@Phunky can you tell me what file do you update manually for making it work exactly? |
|
https://github.com/shama/stylus-loader/blob/master/index.js#L33 I just add my imports directly into the loader. |
|
Can you try with the You can add them in the const stylusLoader = require('stylus-loader')
module.exports = {
build: {
plugins: [
new stylusLoader.OptionsPlugin({
default: {
import: ['~stylus/common.styl']
}
})
]
} |
|
I've already tried that and although the build works it doesn't seem to be passing the options. config.plugins ends up looking like |
|
I let this issue closed since it's related to @Phunky you can post the solution when the team behind stylus-loader will have answered 👍 |
|
asking to reopen this, i don't think it's a stylus loader issue. |
|
I did manage to get it working with
The context part was the key bit, no idea why though :D |
|
mhm I don't think these options work with sass-loader. ist there a way to extend vueloader.config? |
|
You can via build.extend @max-schu |
|
do you happen to have any kind of reference on that? I used build.extend for aliases, but when i tried to extend the vueloader.config, some vars, other configs loaded in there were missing. |
|
@max-schu you can extend the vueLoader like this:
module.exports = {
build: {
extend (config) {
let vueLoader = config.module.rules.find((rule) => rule.loader === 'vue-loader')
// extend vueLoader here
}
}
} |
|
thank you, thats more or less what i did, but this will overwrite the whole nuxt vueloader.config won't it? |
|
@max-schu how could you fix the problem? I can't seem to find any solution so far |
|
I made it work with both bourbon and bourbon-neat, despite that I second @max-schu with his opinion, despite I don't like this fix, it works perfectly. Here's what I did. module.exports = {
build: {
extend (config) {
// Reference: https://github.com/nuxt/nuxt.js/blob/master/lib/webpack/vue-loader.config.js#L12
let vueStyleLoaders = config.module.rules.find((rule) => rule.loader === 'vue-loader').query.loaders
// bourbon & bourbon neat include paths, separated by `&includePaths[]=`
const extraIncludePaths = [
require('bourbon').includePaths,
require('bourbon-neat').includePaths
// ...
].join('&includePaths[]=')
// Apply extra includedPaths
vueStyleLoaders.scss += `?includePaths[]=${extraIncludePaths}`;
}
} |
|
@TareqElMasri actually I ended up including neat without npm and just the plain files. |
|
I did the following to let |
|
@desislavsd thx a lot, i've resolved my problem. |
|
Any suggestions of how to load stylus plugins in nuxt-edge? |
|
@gianniskarmas: This works for me in nuxt-edge (2.0.0-25500158.1b46a95): build: {
extend(config) {
// Customize stylus loader
const stylusRules = config.module.rules.find(rule => rule.test.toString().indexOf("styl") > -1)
if(stylusRules && Array.isArray(stylusRules.oneOf)) {
stylusRules.oneOf.forEach(one => {
if (Array.isArray(one.use)) {
one.use.forEach(u => {
if (u.loader == "stylus-loader") {
const stylusOptions = u.options;
//Define your options here (stylusOptions.use, stylusOptions.import, ...)
//e.g. add a plugin:
const uses = stylusOptions.use = stylusOptions.use || [];
uses.push(function(style) {
style.define("theme", theme, true);
});
}
});
}
});
}
}
} |
|
@gianniskarmas This is my variant for nuxt-edge /*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
/*
** find all stylus configs
*/
[].concat(...config.module.rules.find( e => e.test.toString().match(/\.styl/) ).oneOf.map(e => e.use.filter(e => e.loader == 'stylus-loader'))).forEach(stylus => {
/*
** extend default options
*/
Object.assign(stylus.options, {
import: [
p('assets/configs/nibfix.styl'),
'~nib/lib/nib/index.styl',
'~rupture/rupture/index.styl',
p('assets/configs/vars.styl')
]
})
});
}
}
/**
* Path.resolve alias curried with current directory (__dirname)
* as first parameter
*/
function p(){
return path.resolve(__dirname, ...arguments)
} |
|
I've ended up doing this with webpack-chain and below is a snippet of how I do this with Quasar. The biggest Aha! moment was using |
|
Thank you all but I still haven't found an elegant solution to load stylus and plugins for edge yet even thought I tried all your suggestions. This works perfectly fine in 1.4: but gives the following errors in edge (just the last few lines as the rest are of the same nature): package.json So the question is, what do I have to change on the above code as to make it compatible with edge? |
|
@gianniskarmas Will you please try without the nib library? Also the error you provide doesn't look related to stylus configs :/ |
|
OMG, Thank you @desislavsd. You pointed me to the right direction. Many Thanks, |
|
Glad to hear! As you have already found the fix for the nib is to import following styles before importing the library itself: //nibfix.styl
flex-version = flex
support-for-ie = false
vendor-prefixes = official//nuxt.config.js
Object.assign(stylus.options, {
import: [
p('assets/configs/nibfix.styl'), // first import nibfix
'~nib/lib/nib/index.styl', // then the nib itself
'~rupture/rupture/index.styl',
p('assets/configs/vars.styl')
]
})
//...Just to make it easier for the others ;) |
|
This question has been resolved by @desislavsd, see answer. |
ghost
added
the
|
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
I import various helpers (mixins, vars, functions) into my component automatically to ensure they're always available to me and my team.
Currently I do this by setting the stylus import option within the webpack config as shown below;
stylus: { import: ['~stylus/common.styl'] }I've not been able to figure out how to do this with nuxt, but i'll admit i've not looked deeply into the source myself to see how things are working, I'm hoping this is possible just yet to be documented.
The text was updated successfully, but these errors were encountered: