r/vuejs•
cmries

Can someone please, for the love of God, tell me what I'm doing wrong with my Vue setup

I've lost way too many hours trying to sort this out, so I'm begging you all here. I have a Vue starter app built with Webpack:

https://github.com/chaseries/vue-basic

Everything is good, everything is what I expect—except styles. They just don't work. They never get applied. I have spent ungodly hours trying to figure out why, and I still have no idea. I'm sure I'm betraying some fundamental misunderstanding about Vue or Webpack.

I know the loaders are being applied correctly because it compiles correctly and the style output is there in the dist. It just doesn't work. But when I compare it to my similar (totally functioning!) projects' configs—or those of others, or to the docs—I see no major difference. Someone please tell me why I'm nuts.

Check src/App.vue or src/page/Index.vue files to see that there are styles, both .css and .sass, and that the class names are correct. The build/ directory contains the config.

Posted Sep 16, 2020, 12:46 AM UTC

110
Pattycakes_wcp•

Why not start the project using vue-cli?

2
cmriesOP•

I'm just not in love with some of the decisions in vue-cli, so I just intended on making a starter project to clone when I wanted something new.

2
stealthd•

Decisions like what exactly?

1
shirabe1•

Not the OP but it's hard to know what dependencies and how the stack works. It's also very awkward to customize - you can "chain" to the config using `vue.config.js`, but if the OP is anything like me I want all my configuration right there in my project, not buried away in node_modules. I like to know how my tools work.

Vue CLI is good to get going, but not if you want complete control over your setup. Each to their own!

2
shirabe1•

What happens when you run build? Just empty stylesheet?

Mine seems to be working: https://github.com/lmiller1990/vuejs-composition-course/blob/master/webpack.config.js (this is Vue 3 but the ideas are the same).

I cannot pull your project right now but I might be able to pull and try tonight.

1
cmriesOP•

I haven't set up extraction, so it just renders the same result as in development—a build that contains all the CSS, unapplied.

I really like your setup, by the way. I went through your Webpack config line-by-line, and it looks basically the same as mine, aside from TypeScript rules. I went as far as matching the versions of the packages that you were using to mine and re-building, but no dice. I feel like I'm going crazy. I assumed it was a Webpack problem, but maybe not. My entire app is literally like 10 lines of code, though, so I have no idea where this issue is coming from. I must be doing something seriously dumb.

1
shirabe1•

Okay, I got this to work. Here you go! I changed it to use style-loader instead of vue-style-loader. Basically, with the VueLoader plugin, it will reapply all the rules you have to Vue components, so you don't need to use vue-style-loader where you were using it. I have not seen vue-style-loader before, I don't know what that is. If you look at my config, I am not sure vue-style-loader, just the regular style-loaders.

PS: I have a screencast where I build the webpack config you see in my project from scratch and explain each part. You can find my screencast, and others, here. PS: my content is paid. Anyway, I hope this helped.

Here is the working webpack.config.js.

const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");


module.exports = {
  mode: "development",
  entry: {
    app: "./src/index.js"
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "main.js"
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader"
        ]
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader",
          'css-loader',
          'sass-loader'
        ]      
      },
      {
        test: /\.sass$/,
        use: [
          "style-loader",
          'css-loader',
          {
            loader: "sass-loader",
            options: {
              sassOptions: {
                indentedSyntax: true
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: "./src/skeleton.html",
      title: "Some title"
    })
  ],
  devServer: {
    contentBase: path.resolve(__dirname, "../dist"),
    port: 9000
  }
};
2
cirrhus•

I believe it has something to do with your Webpack cofig. See this for what looks like the exact same issue: https://stackoverflow.com/questions/63770142/webpack-not-loading-vues-single-file-components-css

I'd try using your project with Vue CLI to test if it works, then try to find the difference - basically what the last SO comment recommends.

1
cmriesOP•

I appreciate the comment, and you're right, it's exactly like my problem. That person's setup is even simpler than mine. I still cannot sort out what is wrong. The only major difference I see between my config and the dumped VueCLI version is the inclusion of PostCSS, which I've tried, and which does not change anything.

I'll figure it out somehow. Thank you.

1
damianome•

Use the vue-cli, it was created to avoid exactly all the work you are trying to do to figure out setting up webpack and everything else from scratch. There is nothing wrong with it. If you are just trying to learn how to setup webpack and other things as a project in itself, without Vue, than do a separate project for learning that.

The free sample from Chapter 1 of my book here explains the steps to create a starter Vue 3 project with minimal setup (using TypeScript which is recommended, but you can always uncheck that option during the vue-cli create steps) http://leanpub.com/vue-typescript/c/r2yM9shXkMs9

1