In webpack, all pre-processors need to be applied with a corresponding loader. vue-loader allows you to use other webpack loaders to process a part of a Vue component. It will automatically infer the proper loaders to use based on the lang attribute of a language block and the rules in your webpack config.
For example, to compile our <style> tag with Sass/SCSS:
In your webpack config:
Now in addition to being able to import 'style.scss', we can use SCSS in Vue components as well:
Any content inside the block will be processed by webpack as if it's inside a *.scss file.
Note that sass-loader processes the non-indent-based scss syntax by default. In order to use the indent-based sass syntax, you need to pass options to the loader:
sass-loader also supports a additionalData option which allows you to share common variables among all processed files without having to explicit import them:
TIP
Vue Loader v15 no longer applies PostCSS transforms by default. You will need to use PostCSS via postcss-loader.
Configuration of PostCSS can be done via postcss.config.js or postcss-loader options. For details, consult postcss-loader docs .
postcss-loader can also be applied in combination with other pre-processors mentioned above.
Configuration of Babel can be done via .babelrc or babel-loader options.
It is common to have exclude: /node_modules/ for JS transpilation rules (e.g. babel-loader) that apply to .js files. Due to the inference change of v15, if you import a Vue SFC inside node_modules, its <script> part will be excluded from transpilation as well.
In order to ensure JS transpilation is applied to Vue SFCs in node_modules, you need to whitelist them by using an exclude function instead:
Configuration of TypeScript can be done via tsconfig.json. Also see docs for ts-loader .
Processing templates is a little different, because most webpack template loaders such as pug-loader return a template function instead of a compiled HTML string. Instead of using pug-loader, we need to use a loader that returns the raw HTML string, e.g. pug-plain-loader:
Then you can write:
If you also intend to use it to import .pug files as HTML strings in JavaScript, you will need to chain raw-loader after the preprocessing loader. Note however adding raw-loader would break the usage in Vue components, so you need to have two rules, one of them targeting Vue files using a resourceQuery, the other one (fallback) targeting JavaScript imports:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4