0.2.3 β’ Published 7 years ago
vue-separate-files-loader v0.2.3
vue-separate-files-loader
Load separate .js, .html, .css files under same directory as one .vue file.
It uses src
attr in .vue file's tag, so support all features that vue-loader suports.
Differences between vue-builder-webpack-plugin: It won't output a .vue file under your project directory, instead, it will load all files and directly output to vue-loader, so you can keep your repo cleanerπ!
Install
npm install vue-separate-files-loader --save-dev
or
yarn add --dev vue-separate-files-loader
Usage
Suppose you have files below:
βββ foo
β βββ bar.css
β βββ foo.css
β βββ foo.html
β βββ index.js
βββ index.js
You can use foo
directory as one .vue file to be imported by any other file.
Setup webpack config
Here is a part of webpack config file to use this loader.
...
module: {
rules: [
{
test: /\.jsx?$/,
/* recommended, avoid unnessary import */
include: /foo/,
use: [
/* note the order of loaders is from last to first */
{
loader: 'vue-loader'
options: {
/* normal vue-loader options */
postcss: [require('postcss-cssnext')()]
}
},
{
loader: 'vue-separate-files-loader',
options: {
scoped: true, // use vue-loader's scoped css
}
}
]
}
]
}
...
Options
Actually, all options you pass to this loader, will be passed as attributes to <style></style>
.
examples
...
{
loader: 'vue-separate-files-loader',
options: {
module: true, // use css modules => <style module></style>
}
}
...
...
{
loader: 'vue-separate-files-loader',
options: {
module: 'a', // use css modules and its module name is "a" => <style module="a"></style>
}
}
...
TODOS
- support custome blocks
- use magic comments to indicate tag attr option
- if module is enabled, use file name as module name
Contribution
All kind of issues or pull requests are welcome!