使用 webpack 从 css 文件导入 scss 文件答案

【问题标题】：import scss file from css file with webpack使用 webpack 从 css 文件导入 scss 文件
【发布时间】：2018-04-18 09:18:02
【问题描述】：

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

我幼稚的方法是在我的 webpack 配置中添加 stylus-loader 和对 .styl 扩展名的测试，并在我的 app.scss 文件（这是入口点）中添加一个手写笔文件 @import。

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

【问题讨论】：

您收到file not found 错误。你只需要确保你在 webpack / @import 中引用了正确的路径。你也可以看看这个答案：stackoverflow.com/questions/7111610/…
这不是问题——如果您仔细查看错误消息，您会发现 css-loader 认为加载器链是正常路径。因此，它说Can't resolve './sass'
您在.sass 文件上使用了css-loader？你需要使用sass-loader
我 am 使用sass-loader，我的问题是我还需要编译一个手写笔文件，显然css-loader 和sass-loader 都无法使用webpack 模块树来编译它们的导入。
还有一个stylus-loader:github.com/shama/stylus-loader

标签： css webpack sass stylus

【解决方案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"

【讨论】：