生产环境中，Rails/Webpacker无法加载Vue样式

Question

我有一个Rails应用程序，已经升级到使用webpacker 4.x版本，在开发环境下一切工作良好，但在生产环境中，Vue单文件组件的样式未被渲染，js可以正常工作，甚至某些组件（如vue-slider-component）的样式也正确显示了。我之前使用的是webpacker 3，一切都很正常，但是应用程序在开发过程中变得非常缓慢，所以决定迁移到新的webpacker。

重要的一点是，我的vue组件中使用sass（scss）样式。

以下是我的配置:

// config/webpack/environment.js
const { environment } = require('@rails/webpacker');
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const vue = require('./loaders/vue');
const sass = require('./loaders/sass');

environment.config.resolve.symlinks = false;

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin());
environment.loaders.append('vue', vue);
environment.loaders.append('sass', sass);
const nodeModulesLoader = environment.loaders.get('nodeModules');

nodeModulesLoader.exclude = [nodeModulesLoader.exclude, /mapbox-gl/];

environment.config.resolve.alias = {
  vue$: 'vue/dist/vue.esm.js',
  '@': path.join(__dirname, '..', '..', 'app', 'javascript'),
  '@stylesheets': path.join(__dirname, '..', '..', 'app', 'assets', 'stylesheets'),
  '@javascripts': path.join(__dirname, '..', '..', 'app', 'assets', 'javascripts'),
  '@node_modules': path.join(__dirname, '..', '..', 'node_modules')
};
module.exports = environment;

// config/webpack/production.js
process.env.NODE_ENV = process.env.NODE_ENV || 'production'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()

// config/webpack/loaders/vue.js
module.exports = {
  test: /\.vue(\.erb)?$/,
  use: [
    {
      loader: 'vue-loader',
    },
  ],
};

我是否需要考虑 loaders/sass.js 是原因。

// config/webpack/loaders/sass.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const { extract_css: extractCSS } = require('@rails/webpacker').config;

module.exports = {
  test: /\.(scss|sass|css)$/i,
  use: [extractCSS ? MiniCssExtractPlugin.loader : 'vue-style-loader', 'css-loader', 'sass-loader'],
};

# config/webpacker.yml

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: false

   # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .js
    - .vue
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default

  check_yarn_integrity: false

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: true
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'

test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: true

  # Extract and emit a css file
  extract_css: true


  # Cache manifest.json for performance
  cache_manifest: true

- Boris Barroso

---

你找到任何解决方案了吗？我也遇到了同样的问题... - 2can

不，我已经尝试过并搜索过了。 - Boris Barroso

我的问题是commonChunks插件创建了一个名为“common.css”的文件，但该文件未包含在视图中。添加了common.css链接后，一切都按预期工作。 - 2can

Answer 1

尝试在您的根HTML文件中包含<%= stylesheet_pack_tag 'application', media: 'all' %>。

基于：https://github.com/rails/webpacker/issues/987

- Fábio Araújo

Answer 2

在生产环境中，CSS会被提取到它们自己的文件中（extract_css: true）。确保Webpacker能够解析Vue单文件组件中的CSS并生成必要的文件。您需要修改vue-loader配置：

// config/webpack/loaders/vue.js
module.exports = {
  test: /\.vue(\.erb)?$/,
  use: [
    {
      loader: 'vue-loader',
      options: {
        loaders: {
          'scss': 'vue-style-loader!css-loader!sass-loader',
          'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
        }
      }
    },
  ],
}

为确认文件生成成功，请在生产环境中检查manifest.json。您应该能够找到所有js和css文件的条目。

其次，请确保您正在使用stylesheet_pack_tag来要求css文件。

- EJAg

Answer 3

Vue模板需要在应用程序中加载样式表才能使CSS工作。这是除了为入口点加载JavaScript文件之外的另一个步骤。加载样式表还将加载任何嵌套组件的CSS。 https://github.com/rails/webpacker/issues/987#issuecomment-341903345

<%= stylesheet_pack_tag 'hello_vue' %> 
<%= javascript_pack_tag 'hello_vue' %>

- Bassirou Diaby