用webpack从css文件导入scss文件

Question

在我的项目中，我需要将用2种不同的预处理语言(SASS和Stylus)编写的样式表组合成一个css文件。

我天真的方法是将带有.styl扩展测试的stylus-loader添加到我的webpack配置中，并从我的app.scss文件(这是入口点)中@import一个手写笔文件。

看起来sass-loader并不像JavaScript那样解析模块。我还尝试用我的app.scss和手写笔文件作为imports来创建一个入口点CSS文件，但同样不起作用。

这只是我遗漏的一个配置，还是css-loader和sass-loader不支持这种模块解析？

入门CSS

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

这将导致以下错误：

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

Answer 1

因为css-loader、sass-loader或style-loader都不能加载其他语言的文件(我认为使用sass-loader!my-file.scss这样的加载器链串应该是可能的)，所以我将样式导入到我的索引javascript文件中，并使用提取文本插件。这可以很好地工作。

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"