使用不生效 - Githubissues

walid1992 commented 7 years ago

这个库按照配置写进webpack了，打包之后没生效丫

Jinjiang commented 7 years ago

可以更详细的描述一下你的问题吗

walid1992 commented 7 years ago

在webpack 2.6中加入这行代码，并没有将px转换成rem丫

Jinjiang commented 7 years ago

注意看错误提示：

Module not found: Error: Can't resolve 'style' in '/Users/jinjiang/Code/px2rem-demo'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'style-loader' instead of 'style',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

我这边把配置改成

loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8' }]

就可以了

walid1992 commented 7 years ago

我这边没报错误，请问您这边有关于webpack 2.0 以上的示例sample吗？就是打包出来的html没有将px转换成rem~

Jinjiang commented 7 years ago

我的例子非常简单

src/main.js

require('./style.css')
console.log(1)

src/style.css

body {
  margin: 20px;
}

webpack.config.js

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8' }]
  }
}

package.json

{
  "name": "px2rem-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^0.28.4",
    "style-loader": "^0.18.2",
    "webpack": "^2.6.1"
  }
}

打包出来的结果 dist/bundle.js：

...
// module
exports.push([module.i, "body {\n  margin: 0.26666667rem;\n}", ""]);
...

SKing7 commented 6 years ago

threeVersion 参数不能用吗

Jinjiang commented 6 years ago

@SKing7 是的，threeVersion 会生成多份文件，而 webpack 是把所有内容打包成一个 bundle，已经超出 webpack 的正常能力和指责范围了，所以没有提供。 @walid1992 如果没有更多反馈我先把 issue 关掉了

Nisus-Liu commented 6 years ago

我的正常配置后, 也不能生效. px依然是px, 有人知道原因吗.

下面是我的主要配置:

...

                test: /\.vue$/,
                loader: 'vue-loader',
                //try: 解决style编译问题 failed , 还是得加 lang="scss"
                //与名称相反，sass-loader 默认解析 SCSS 语法。如果你想要使用 Sass 语法，你需要配置 vue-loader 的选项：
                options: {
                    loaders: {
                        css:'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8',         
                        scss: 'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8!sass-loader',  
                        sass: 'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8!sass-loader?indentedSyntax'  
                    }
                }

...

Jinjiang / px2rem-loader

使用不生效 #8