module.exports = { ... css: { ... esModule: false } ... }
问题描述
vue文件中的样式失效
环境
- vue-cli 4.4.6
- css-loader 4.2.1
- vue-style-loader 4.1.2
原因
vue-cli 4.4.6
vue-cli 4.4.6
默认对css-loader
配置为空
css-loader 4.2.1
css-loader4.0后
默认对esModule
设置的是true
vue-style-loader 4.1.2
vue-style-loader 4.1.2
默认接收的是commonjs的结果,也就是默认接收的是“css-loader中esModule设置的是false的结果”,
所以一个配置的是true,一个接收的是false,最终就不会显示样式了。
方案
- 在项目的vue.config.js中对css的esModule改成false
- 修改vue-style-loader的源码
vue-style-loader/index.js:
var shared = [ '// style-loader: Adds some css to the DOM by adding a <style> tag', '', '// load the styles', 'var content = require(' + request + ').default;', //这里加一个.default即可 ...
- 修改css-loader源码,让esModule默认为false
css-loader/dist/utils.js
function normalizeOptions(rawOptions, loaderContext) { if (rawOptions.icss) { loaderContext.emitWarning(new Error('The "icss" option is deprecated, use "modules.compileType: "icss"" instead')); } const modulesOptions = getModulesOptions(rawOptions, loaderContext); return { url: typeof rawOptions.url === 'undefined' ? true : rawOptions.url, import: typeof rawOptions.import === 'undefined' ? true : rawOptions.import, modules: modulesOptions, // TODO remove in the next major release icss: typeof rawOptions.icss === 'undefined' ? false : rawOptions.icss, sourceMap: typeof rawOptions.sourceMap === 'boolean' ? rawOptions.sourceMap : loaderContext.sourceMap, importLoaders: rawOptions.importLoaders, esModule: typeof rawOptions.esModule === 'undefined' ? false : rawOptions.esModule //默认改成false }; }
css-loader开发有点坑啊~ 之前版本都是false,更新后直接改成true