vue踩坑记录之css相关

1.剥离css的配置

使用vue的cli生成的的默认配置的js里你会发现css内联在js里的,加载js之后vue会把css写成页内样式,我总是很不习惯把css内嵌入js里, webpack有个插件extract-text-webpack-plugin,可以把css单独剥离出来,

整个过程如下:这是webpack2.0的插件

npm install --save-dev extract-text-webpack-plugin@2.0.0-beta.41

然后你需要安装vue的一堆loader,如果你用了less,scss之类也需要安装对应的loader

npm install vue-loader vue-html-loader vue-style-loader css-loader --save-dev

然后修改对应的webpack.config.js

//module
{
    test: /.vue$/,
    loader: 'vue-loader',
    options: {
        loaders: {
             
            'scss': ExtractTextPlugin.extract({
                loader: 'css-loader!sass-loader',
                fallbackLoader: 'vue-style-loader'
            })

        }
        // other vue-loader options go here
    }
}

//plugins
plugins: [
    new ExtractTextPlugin({filename: 'css/[name].css'})
]

然后就可以了,

我的package的配置如下

{
  "name": " ",
  "description": " ",
  "version": "1.0.0",
  "author": " ",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.1.0",
    "vue-router": "^2.1.1"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "extract-text-webpack-plugin": "^2.0.0-rc.2",
    "file-loader": "^0.9.0",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "node-sass": "^4.1.1",
    "sass-loader": "^4.1.1",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^10.3.0",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "^2.1.0",
    "webpack": "^2.1.0-beta.25",
    "webpack-dev-server": "^2.1.0-beta.12"
  }
}

2.复写background-image不规范导致的bug

这个坑严格来说应该是我的书写不规范导致的,

举例如下:

需要复写.abc样式的背景图片为空,总是习惯性的这样写:

.abc{background-image:url("")!important}

在css里这样是没啥毛病的。。但是webpack打包的时候就报错了,会是一个很类似于这样的错误

Module not found: Error: Can't resolve './' in 'xxxxx'

这其实是我的css属性不规范导致的,但是排错耽误了我很久。。。正确的写法如下:

.abc{background-image:initial!important; }


本文标题:vue踩坑记录之css相关
本文链接:https://56way.com/p/92.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。