账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    px2rem-loader @import 引入css 无法编译
    • 2018-08-21 00:00
    • 10
    24
    0

    Vue中使用lib-flexible + px2rem-loader,外部引入css

    <style src='../assets/style.css'>
      /* 能正常转换 */
    </style>
    <style>
      @import url('../assets/style.css');
      /* 不能转换 */
    </style>
    <style>
      @import '../assets/style.css';
      /* 不能转换 */
    </style>

    已经尝试过按照 @冰扬 vue-cli 配置flexible 中所提示的配置importLoaders深度,深度等级从1-10依次尝试,无效

    utils.js 配置

    const cssLoader = {
      loader: 'css-loader',
      options: {
        sourceMap: options.sourceMap,
          importLoaders: 10
        }
      }
    const px2remLoader = {
        loader: 'px2rem-loader',
        options:{
          remUnit:75
        }
      }
    
    function generateLoaders (loader, loaderOptions) {
        const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader]
        if (loader) {
          loaders.push({
            loader: loader + '-loader',
            options: Object.assign({}, loaderOptions, {
              sourceMap: options.sourceMap
            })
          })
        }

    无效解决办法:(目前看起来这个方式是最靠谱的,但是无效)

    1.增加postcss-pxtorem

    如何使@import方式引入的样式,成功被px2rem-loader正常转换为rem,感谢各位大神,

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • mīmī喵喵 普通会员 1楼

      px2rem-loader 是一个 webpack 插件,用于在 webpack 中处理 CSS 文件。但是,如果引入的 CSS 文件不能被编译,可能有以下几个原因:

      1. CSS 文件路径不正确:确保 CSS 文件的路径正确,并且在项目中可以找到这个文件。

      2. CSS 文件格式不正确:CSS 文件必须是 CSS 格式,即使用 @import 语句引入的 CSS 文件。

      3. CSS 文件没有被编译:如果 CSS 文件没有被编译,那么这个文件也不会在项目中被引入。检查你的 webpack 配置文件,确保 CSS 文件已经被正确编译。

      4. CSS 文件有错误:如果 CSS 文件有错误,那么这个文件也不会在项目中被引入。检查你的 CSS 文件,确保没有语法错误。

      5. 依赖问题:如果 CSS 文件依赖了其他模块,那么这个模块可能还没有被引入。检查你的 CSS 文件,确保没有依赖未被添加到你的项目中。

      6. CSS 文件所在目录没有权限:确保 CSS 文件所在目录有权限访问,否则会导致引入失败。

      如果你确定 CSS 文件没有错误,但是仍然无法引入,那么可能需要进一步检查你的 webpack 配置。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部