Using postcss and packaging with webpack in vue components - Codes Helper - Programming Question Answer

Using postcss and packaging with webpack in vue components

topic description

the styles in the components of vue use postcss, but when the self-configured webpack is packaged, it is found that the nested styles are not recognized, resulting in the invalidation of some styles

related codes

vue component code:

const path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/dist/",
    filename: "index.js"
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          "vue-loader"
        ]
      },
      {
        test: /.css$/,
        use: [
          "vue-style-loader",
          "css-loader"]
      },
      {
        test:/\.pcss$/,
        use:[
            {
              loader: "postcss-loader",
              options: {
                plugins: () => [require("autoprefixer")]
              }
            }  
        ]
      },
      {
        test:/\.(gif|png|jpg|woff|svg|eot|ttf)/,
        use:[
            {
                loader:"url-loader",
                options: {
                    limit: 8192
                }
            }
        ],
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
  resolve: {
    extensions: [".vue",".js"],
    alias: {
      vue$: "vue/dist/vue.esm.js"
    }
  },
  devServer: {
    port: 9000
  }
};

after packaging, it is found that only .styles-img-con are recognized, but .blank-img is not.

what should I do to pack normally? in addition, I just learned from webpack, that there is something wrong with the configuration of webpack. Please point out

.

Vue.js webpack postcss

Jan.26,2022

need to configure plug-ins for postcss postcss-cssnext

The main purpose of the

question is to understand that postcss is not a css preprocessor like sass and less. It can be understood as a platform or a set of API, support for transforming css using js. It itself uses ordinary css rules to write styles, and there is no way to write outside the css standard. Its power is that it is convenient for us to extend any writing, because we can use js to achieve parsing, these parsing methods come from the API, provided by postcss, and he can also load the js plug-in combination parsing that extends on top of it. For example, to use it to implement convenient syntax like nesting, you can use plug-ins such as postcss-nested to parse it into legal css rules. In the final analysis, it is mainly for Slack Off, with less code.

the plugin autoprefixer has been added to your configuration. Similarly, if you want to implement other convenient writing methods, you can continue to add other plug-ins after that.

{
    test:/\.pcss$/,
    use:[
        {
          loader: 'postcss-loader',
          options: {
            plugins: () => [require('autoprefixer')]
          }
        }  
    ]
  }

Note that the order in which postcss plug-ins are added is required. These requirements are clearly stated on the github home page of those more formal plug-ins. In addition, many plug-ins are provided by developers themselves, so several people may provide plug-ins for the same function, and the quality may not be guaranteed, so it will be difficult to choose. Therefore, there are some plug-in packages specially designed to provide packaged plug-ins, which have also been configured in order. When you use them, you only need to load a plug-in package to achieve a lot of effects. For example, the postcss-cssnext, mentioned above is also rucksack earlier.

Previous: Modify databases across servers

Next: Excuse me, if there is no complete path, where is the real location of the file?

How postcss ignores a folder
how to use postcss, in vue-cli3 to ignore a folder and not let it affect the style inside? the vue.config.js code is as follows css: { chainWebpackcss loader modules: false, foo.module.css extract: true, css ExtractTextPlugin<style&...

Vue-cli vue.js webpack postcss

Aug.13,2021

Menu