Question

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

我天真的方法是将stylus-loader测试.styl扩展名添加到我的webpack配置中，并@import添加一个来自我的app.scss文件的测针文件（是入口点。

似乎sass-loader无法像JavaScript中那样解析模块。我还尝试使用我的app.scss和Stylus文件作为导入创建入口点CSS文件，这也不起作用。

这只是我缺少的配置还是css-loader和sass-loader只是不支持这种模块解析？

Entry 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"

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

1 个答案: