如何在 .vue 文件中编译 css答案

【问题标题】：How can I make css compile in .vue files如何在 .vue 文件中编译 css
【发布时间】：2018-02-08 12:52:20
【问题描述】：

当我使用 scss 或 sass 时，我正在使用 webpacker gem 进行 Rails 开发，编译器适用于 .vue 文件，但不适用于纯 css。

这行得通：

<style lang="scss" scoped>
form label{
  color: red !important;
}
</style>

但这不是

<style scoped>
form label{
  color: red !important;
}
</style>

webpack中sass的配置部分

module.exports = {
  test: /.vue$/,
  loader: 'vue-loader',
  options: {
    extractCSS: true,
    loaders: {
      js: 'babel-loader',
      file: 'file-loader',
      scss: 'vue-style-loader!css-loader!postcss-loader!sass-loader',
      sass: 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax'
    }
  }
}

【问题讨论】：

我过去遇到过这个问题。由于 css 是 scss 的子集，是否有充分的理由花时间尝试解决此问题？
只是一个想法：如果在加载器对象中添加css: 'vue-style-loader!css-loader 不起作用？
@Phil 解决这个问题的主要原因是有很多 vue 节点模块只使用 css

标签： ruby-on-rails webpack vuejs2 webpacker

【解决方案1】：

这真的很奇怪，但它确实有效，更改config/webpack/loaders/sass.js中的行

{ loader: 'css-loader', options: { minimum: env.NODE_ENV === 'production' } },

与

'css-loader',

并运行./bin/webpack-dev-server，它可以编译css，然后我将更改切换回原来的，它正在工作。

{ loader: 'css-loader', options: { minimum: env.NODE_ENV === 'production' } },

我不明白发生了什么，但它奏效了，而且我尝试了很多东西。

【讨论】：