Question

我正在尝试使用手写笔构建Vuejs应用程序。我在rules数组中的build / webpack.base.conf.js中安装了stylus stylus-loader style-loader css-loader add。

{
  test: /\.styl$/,
  loader: ['style-loader', 'css-loader', 'stylus-loader']
}

我在src文件夹名main.styl中创建了一个空文件，并添加到main.js中。

当我运行npm run dev时显示错误，

模块构建失败：ParseError：预期“缩进”，得到“！”

这里有什么不对......

Answer 1

关于我遇到同样问题的事实，并且你的build目录里面有webpack.base.conf.js，我假设您正在使用vuejs webpack boilerplate。

重点是此样板文件已经定义了Stylus文件.styl或.stylus的加载器。它确实是使用build/webpack.dev.conf.js中定义的函数build/webpack.prod.conf.js在styleLoaders或build/utils.js中定义的插件的一部分。 您无需在build/webpack.base.conf.js中添加任何配置。

但是，如果您需要将特殊选项传递给stylus-loader，例如，如果您需要import a library或global stylus file所有组件，则必须将其传递给函数cssLoaders中的build/utils.js，即：

const stylusOptions = {
  import: [path.resolve(__dirname, 'relative/path/to/file.styl')]
  // or other options
}

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  stylus: generateLoaders('stylus', stylusOptions),
  styl: generateLoaders('stylus', stylusOptions)
}

希望它有所帮助，尽管这篇文章很老了。

Answer 2

我遇到了关于将import * .styl导入main.js的相同问题。

我的解决方案：打开webpack.base.conf.js，找到＆＃34; module.rules＆＃34;部分，断言

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader', 'stylus-loader'],
},

我的项目基于＆＃34; vue ^ 2.5.2＆＃34;，vue-cli ^ 2.8.2，我希望可以帮到你。

我的webpack.base.conf.js文件：

ParseError：预期“缩进”，得到“！”

2 个答案: