import scss file from css file with webpack

Question

In my project, I need to combine stylesheets that were written in 2 different preprocessor languages (SASS and Stylus) into one css file.

My naïve approach was to just add stylus-loader with a test for the .styl extension into my webpack config, and @import a stylus file from my app.scss file (which is the entrypoint).

It seems that sass-loader doesn't resolve modules like it happens in JavaScript. I also tried making an entrypoint CSS file with my app.scss and the Stylus file as imports, which also doesn't work.

Is this just a configuration I'm missing or do css-loader and sass-loader just not support this kind of module resolve?

Entry CSS

@import "sass-loader!./app.scss";
@import "stylus-loader!../node_modules/vuetify/src/stylus/main.styl

This will just result in this error:

ERROR in ./node_modules/css-loader??ref--6-1!./css/app.css
Module not found: Error: Can't resolve './sass' in '/Users/tux/projects/zenner/platform-base/platform/assets/css'
 @ ./node_modules/css-loader??ref--6-1!./css/app.css 3:10-95

ERROR in ./node_modules/css-loader??ref--6-1!./css/app.css
Module not found: Error: Can't resolve './stylus' in '/Users/tux/projects/zenner/platform-base/platform/assets/css'
 @ ./node_modules/css-loader??ref--6-1!./css/app.css 4:10-131

you're getting a `file not found` error. you just need to make sure you're referring to the correct path within the webpack / @import. you can also look at this answer: https://stackoverflow.com/questions/7111610/import-regular-css-file-in-scss-file/36166487#36166487 — King Reload, Apr 18 '18 at 09:33
That's not the problem - if you look closely at the error message, you'll see that css-loader thinks the loader chain is a normal path. Because of that, it says `Can't resolve './sass'` — narrowtux, Apr 18 '18 at 09:41
you used a `css-loader` on `.sass` files? you need to use the `sass-loader` — King Reload, Apr 18 '18 at 09:44
I _am_ using the `sass-loader`, my problem is that I need to compile a stylus file as well and apparently neither `css-loader` nor `sass-loader` are capable of using webpack module tree to have their imports compiled. — narrowtux, Apr 18 '18 at 09:51
there's also a `stylus-loader`: https://github.com/shama/stylus-loader — King Reload, Apr 18 '18 at 09:55
This discussion has derailed, please read my original question, it should be very clear that I'm past the question of which loaders I should be using to compile SCSS and Stylus files — narrowtux, Apr 18 '18 at 09:57

score 2 · Answer 1 · answered Apr 18 '18 at 10:02

Because none of css-loader, sass-loader or style-loader can load files in other languages (which I think should be possible with a loader chain string like sass-loader!my-file.scss), I instead imported the styles in my index javascript file and used extract-text plugin. This works fine.

webpack.config.js

var ExtractTextPlugin = require("extract-text-webpack-plugin")
const extractCSS = new ExtractTextPlugin('css/styles.css')

  {
    test: /\.scss$/,
    use: extractCSS.extract({use: ["css-loader", "sass-loader"]})
  }, {
    test: /\.styl$/,
    use: extractCSS.extract({use: ["css-loader", 'stylus-loader']})
  }

app.js

import "../css/app.scss"
import "vuetify/src/stylus/main.styl"

import scss file from css file with webpack

1 Answers1