Reputation: 1339
Versions:
stylus: 0.54.5
stylus-loader: 3.0.2
webpack: 4.30.0
Folder structure:
src
|_ css
|_ base
|_ _vars.styl
|_ another.styl
|_ js
|_ some
|_ some.js => (It has "import './some.styl'")
|_ some.styl
import 'base/_vars.styl'
works fine in some.js
works;
It also works fine if imported in another.styl
file. @import 'base/_vars.styl'
However, it doesn't work inside some.styl
. I've to use relative path to make it work @import '../../css/base/_vars.styl'
Webpack Configs:
const paths = {
css: path.join(__dirname, '../src/css/'),
javascript: path.join(__dirname, '../src/js'),
};
// module.rules for stylus loader
{
loader: 'stylus-loader',
options: {
sourceMap: !IS_PRODUCTION,
preferPathResolver: 'webpack' // Doesn't make any difference
},
}
const resolve = {
extensions: [
'.webpack-loader.js',
'.web-loader.js',
'.loader.js',
'.js',
'.jsx',
'.styl', // Doesn't make any difference
'.css', // Doesn't make any difference
],
modules: ['node_modules', paths.javascript, paths.css],
};
Note: Importing JS files and css from resolve directories work fine in JS file.
Interesting same webpack config for sass-loader
works fine. What's that I'm missing?
Upvotes: 3
Views: 535