css - 使用 webpack 从 css 文件导入 scss 文件

Question

在我的元素中，我需要将用 2 种不同的预处理器语言(SASS 和 Stylus)编写的样式表合并到一个 css 文件中。

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

sass-loader 似乎不像在 JavaScript 中那样解析模块。我还尝试使用我的 app.scss 和 Stylus 文件作为导入制作一个入口点 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 文件中导入样式并使用 extract-text 插件。这很好用。

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"