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

Answer 1

尝试在根HTML文件中添加<%= stylesheet_pack_tag 'application', media: 'all' %>。

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

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

确保您requiring the css files

Answer 3

Vue模板需要在您的应用程序中加载样式表为了使CSS正常工作。这是除了加载用于入口点。加载样式表还将加载CSS 任何嵌套的组件。 https://github.com/rails/webpacker/issues/987#issuecomment-341903345

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

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

3 个答案: