Stylus-loader
Rosella Brain
The point is that this boilerplate already defines the loaders for Stylus files .styl or .stylus. It is indeed part of a plugin defined in either build/webpack.dev.conf.js or build/webpack.prod.conf.js, using function styleLoaders defined in build/utils.js. You don't need to add any configuration in build/webpack.base.conf.js.
However, if you need special options to be passed to stylus-loader, for instance if you need to import a library or a global stylus file for all your components, you have to pass it in function cssLoaders in build/utils.js, ie:
Behind the scenes, Laravel Mix of course defers to webpack's stylus-loader to load and compile your Stylus files.From time to time, you may need to override the default options that we pass to it. Use the third argument to mix.stylus() in these scenarios.
Foe example, you may wish to install additional Stylus-specific plugins, such as Rupture. No problem. Simply install the plugin in question through NPM (npm install rupture), and then include it in your mix.stylus() call, like so:
to the top of webpack.config.js as per css-modules-require-hook however I am unsure if the hook is supposed to go at the top of the webpack.config.js file and then if I need to somehow call the hook inside the webpack.config module.exports
You don't have stylus_plugin installed, but you can't install it because there is no such package in the npm registry. And in fact that was supposed to be an example use of plugins you could use (e.g. poststylus). To be fair that wasn't quite clear from the stylus-loader Readme and has just been mentioned in the GitHub issue Error: Cannot find module 'stylus_plugin' #155.
Well you need to enable css-modules for your .styl files as well. And while on that subject you should also only have one .css rule and include both style-loader and css-loader in there, otherwise they will be applied separately, not in sequence. So your modules.rules should look like this:
If you are new to vue-cli and its webpack template, you are probably in a situation where you do not really know how to declare global style rules for your project. This article will show you how to do this with standard CSS, but also with a preprocessor. We will use Stylus with stylus-loader.
One big strength of Vue.js is its modular nature. Just like the pieces of a puzzle, Vue allows you to build complex applications using components. Each component is ideally represented in a .vue file which contains its own template, script and style. A single file component is a convenient way to encapsulate all the code of a specific building block. But what if we need some global CSS rules, for instance to set the default font family, background image or general media queries?
Style rules declared in .vue files are processed by Webpack thanks to vue-loader and PostCSS. When a style section is scoped, these rules only apply to the component in which they are defined. This means that you will not be able to style the body element from a scoped style section. is actually defined in your index.html and is not part of any component template.
We have seen that style sections from single file components are processed by Webpack. But in fact, you do not really need a style section in a .vue file to give some work to Webpack. You can simply import your CSS as a dependency in your main.js file:
It works, but it looks weird. Moreover, in a Vue.js project, Webpack is mostly used to compile single file components. So when a stylesheet is not related to any specific component, it might be interesting to put it in the static folder to distinguish it easily.
Webpack relies on loaders to process resources. If you use a CSS preprocessor like Sass, Less or Stylus, you will need the corresponding loader for Webpack: sass-loader, less-loader or stylus-loader. For this particular example, we will use Stylus which is the most flexible and easiest to configure in a Vue.js project.
If CSS preprocessors are part of your ordinary workflow, you probably like to create global files that contain some variables or mixins. For example, a common use case is to have all colors from a design in a single file using variables. It is useful since you can then use clear variable names in your code instead of a more obscure hexadecimal notation. In your Vue.js project, you may want to create such a file, named colors.styl (in a stylus folder), with the following content:
A better approach is to use a Webpack alias to avoid repetitive modifications in case you move your styl file. If you installed vue-router through vue-cli, you probably saw some @ in import paths. This is actually an alias that corresponds to src. We can then apply the same logic to reference some global Stylus files!
ff7609af8f