Cli3.0+element-ui 按照官方的安装后不显示css

引入element-ui:


页面显示:

页面代码:
image

刚创建项目导入时, 样式是正常的, 项目无改动重启几次后就无法加载样式, 无提示任何问题

项目配置:

const path = require("path");
const sourceMap = process.env.NODE_ENV === "development";

module.exports = {
    // 基本路径
    publicPath: "./",
    // 输出文件目录
    outputDir: "dist",
    // eslint-loader 是否在保存的时候检查
    lintOnSave: false,
    // webpack配置
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: () => { },
    configureWebpack: config => {
        if (process.env.NODE_ENV === "production") {
            // 为生产环境修改配置...
            config.mode = "production";
        } else {
            // 为开发环境修改配置...
            config.mode = "development";
        }

        Object.assign(config, {
            // 开发生产共同配置
            resolve: {
                extensions: [".js", ".vue", ".json", ".ts", ".tsx"],
                alias: {
                    vue$: "vue/dist/vue.js",
                    "@": path.resolve(__dirname, "./src")
                }
            }
        });
    },
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: sourceMap,
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {},
        // 启用 CSS modules for all css / pre-processor files.
        requireModuleExtension: false
    },
    // use thread-loader for babel & TS in production build
    // enabled by default if the machine has more than 1 cores
    parallel: require("os").cpus().length > 1,
    // PWA 插件相关配置
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},
    // webpack-dev-server 相关配置
    devServer: {
        open: process.platform === "darwin",
        host: "localhost",
        port: 3001, //8080,
        https: false,
        hotOnly: false,
        // proxy: {
        //     // 设置代理
        //     // proxy all requests starting with /api to jsonplaceholder
        //     // "/api": {
        //     //     // target: "https://emm.cmccbigdata.com:8443/",
        //     //     target: "http://localhost:3000/",
        //     //     // target: "http://47.106.136.114/",
        //     //     changeOrigin: true,
        //     //     ws: true,
        //     //     pathRewrite: {
        //     //         "^/api": ""
        //     //     }
        //     // }
        // },
        before: app => { }
    },
    // 第三方插件配置
    pluginOptions: {
        // ...
    }
};

半年没写过前端了, 都不记得了, 急求助

现在在index.html引入cdn上的样式, 已正常使用, 但这样无法按需引入, 这只是个权益的解法, 还是需求正常的解决方法

没遇到过这样的问题:thinking:

已解决 是vue.config.js下的

css: {
        // 是否使用css分离插件 ExtractTextPlugin
        // extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {},
        // 启用 CSS modules for all css / pre-processor files.
        // requireModuleExtension: false
    },

这里的 requireModuleExtension必须要为true, 我也不知道理由, 只是看说明这段管css的一项一项排除出来的结果

这边在 @vue/cli@4.1.1 创建的项目里面没能复现。

已解决 估计是框架的都有使用css module, 而我设置里面关掉了, 导致了这个问题

这边 requireModuleExtension 设置为 true 或者 fasle 都是能够生效的。

… 那我也不知道是哪的问题了
问题大概复现到解决:
创建项目-> 导入element-ui -> 启动(正常)-> 停止运行 -> 添加vue.confing.js ->启动(css无效) -> 停止 -> 删除vue.confing.js内容 -> 启动(正常) -> 停止 -> 恢复vue.confing.js内容 -> 重复 (注释css的项 ->启动 ->停止) 直到样式加载
我是这样测出来是requireModuleExtension的问题, 测试了两个项目都是如此