webpack + PostCSS + cssnext

hqman 发布于2019-08-21 12:00 / 2632人阅读

摘要：安装依赖包配置配置到这里就可以愉快的用编写了比如在中可以这样其它样式文件有了有了，我们可以写这样的东西希望可以帮到大家。

1.安装依赖包

npm install --dev 
webpack extract-text-webpack-plugin 
css-loader 
file-loader 
postcss 
postcss-loader 
postcss-cssnext 
postcss-import

2.Webpack配置

const path = require("path")
const webpack = require("webpack")
const HtmlWebpackPlugin = require("html-webpack-plugin") 
const ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
    entry: [
        path.join(__dirname,"../app.js")
    ],
    output : {
        path : path.join(__dirname,"/dist/"),
        filename : "[name]-[hash]-min.js",
        publicPath : "/",
        chunkFilename : "[name].[chunkhash:5].chunk.js"
    },
    plugins : [
        new ExtractTextPlugin({
            filename : "[name]-[hash].min.css",
            allChunks: true
        }),
         new webpack.LoaderOptionsPlugin({
            options: {
                context: __dirname,
                postcss: [
                    require("autoprefixer"),
                    require("precss"),
                    require("postcss-assets")
                ]
            }
        })
    ],
    module : {
        loaders : [
            {
                test: /.jsx?$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                query: {
                    "plugins": ["transform-decorators-legacy"],
                    "presets": ["es2015", "stage-0", "react"]
                }
            },
            {
                test: /.json?$/,
                loader: "json"
            },   
             {
                test: /.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use : "css-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]!postcss-loader"
                })
            },
            {
                test: /.(png|svg|jpg|gif)$/,
                loader: "file-loader"
            }
        ]
    }
}

3.postcss.config.js 配置

module.exports = {
    plugins: [
        require("precss"),
        require("postcss-import")({

        }),
        require("postcss-cssnext")({
            browsers: ["last 2 versions", "> 5%"],
        }),
        require("postcss-assets")({
            basePath : "./src",
            loadPaths: []
        }),
    ]
}

到这里就可以愉快的用cssnext 编写css了

比如src/app.css

import styles from "./app.css";

在app.css中可以这样import其它样式文件

/* Shared */
@import "shared/colors.css";
@import "shared/typography.css";
/* Components */
@import "components/Article.css"

有了有了cssnext，我们可以写这样的东西:

/* shared/colors.css */
:root {
  --color-black: rgb(0,0,0);
  --color-blue: #32c7ff;
}

/* shared/typography.css */
:root {
  --font-text: "FF DIN", sans-serif;
  --font-weight: 300;
  --line-height: 1.5;
}

/* components/Article.css */
.article {
  font-size: 14px;
  & a {
    color: var(--color-blue);
  }
  & p {
    color: var(--color-black);
    font-family: var(--font-text);
    font-weight: var(--font-weight);
    line-height: var(--line-height);
  }
  @media (width > 600px) {
    max-width: 30em;
  }
}

希望可以帮到大家。http://cssnext.io/postcss/

超融合服务器专线服务 cssnext PostCSS webpack _webpack

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87333.html

webpack + PostCSS + cssnext

摘要：安装依赖包配置配置到这里就可以愉快的用编写了比如在中可以这样其它样式文件有了有了，我们可以写这样的东西希望可以帮到大家。 1.安装依赖包 npm install --dev webpack extract-text-webpack-plugin css-loader file-loader postcss postcss-loader postcss-cssnext po...

Miracle_lihb 2019-08-29 13:10 评论0 收藏0
PostCSS真的太好用了！

摘要：下面的代码违反规则下面的代码符合规则禁止使用十六进制颜色十六进制的颜色违反规则无效的十六进制色同样违规下面的是符合规则的自动将十六进制色转换为大写或者小写可以使用实现同样的功能。 showImg(https://segmentfault.com/img/remote/1460000014782565); 在PostCSS官网有着这样的对PostCSS特性介绍，箭头后面是对应功能的插件及...

SKYZACK 2019-08-29 15:18 评论0 收藏0
爱搞事情的webpack

摘要：可以防止不同操作系统之间的文件路径问题，并且可以使相对路径按照预期工作。被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。安装脚本配置，官方推荐的配置如下，但是需要结合自己的项目修改一下插件的套路。 webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。 showImg(https://segmentfault.com/...

JiaXinYi 2019-08-26 11:44 评论0 收藏0
爱搞事情的webpack

摘要：可以防止不同操作系统之间的文件路径问题，并且可以使相对路径按照预期工作。被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。安装脚本配置，官方推荐的配置如下，但是需要结合自己的项目修改一下插件的套路。 webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。 showImg(https://segmentfault.com/...

yexiaobai 2019-08-01 18:36 评论0 收藏0
爱搞事情的webpack

摘要：可以防止不同操作系统之间的文件路径问题，并且可以使相对路径按照预期工作。被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。安装脚本配置，官方推荐的配置如下，但是需要结合自己的项目修改一下插件的套路。 webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。 showImg(https://segmentfault.com/...

yeooo 2019-08-05 17:59 评论0 收藏0