我有一个Rails应用程序,已经升级到使用webpacker 4.x版本,在开发环境下一切工作良好,但在生产环境中,Vue单文件组件的样式未被渲染,js可以正常工作,甚至某些组件(如vue-slider-component)的样式也正确显示了。我之前使用的是webpacker 3,一切都很正常,但是应用程序在开发过程中变得非常缓慢,所以决定迁移到新的webpacker。
重要的一点是,我的vue组件中使用sass(scss)样式。
以下是我的配置:
我是否需要考虑
重要的一点是,我的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