Rails/Webpacker 未在生产中加载 Vue 样式

Posted 2023-02-22

【中文标题】Rails/Webpacker 未在生产中加载 Vue 样式

【英文标题】：Rails/Webpacker not loading Vue styles in production

【发布时间】：2019-12-11 04:35:16

【问题描述】：

我有一个 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

【问题讨论】：

您找到解决方案了吗？我面临着同样的问题......

没有，我已经尝试过搜索了。

我的问题是 commonChunks 插件正在创建视图中未包含的“common.css”文件。添加 common.css 链接后一切正常

【参考方案1】：

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

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

【参考方案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 确保您是requiring the css files

【参考方案3】：

Vue 模板需要在您的应用程序中加载样式表 为了让CSS工作。这是除了加载 JavaScript 文件之外的 入口点。加载样式表也会加载 CSS 任何嵌套组件。 https://github.com/rails/webpacker/issues/987#issuecomment-341903345

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