Add dist directory for generated files

[antivir88]

WebPack work with options exclude: node-modules for all rules

[kyuwoo-choi]

could you describe what you want more specifics, please? reopen this issue with details anytime.

[antivir88]

main.js?2be4dfacd05db5aefce6:66907 Error: Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

@charset 'UTF-8'; | / Icons / | @font-face { at Object../node_modules/vue-slick-carousel/dist/vue-slick-carousel-theme.css (1.js:117) at _webpackrequire (runtime~main.js?2be4dfacd05db5aefce6:85) at Module../src/pages/catalog/index.vue (1.js:11819) at _webpackrequire (runtime~main.js?2be4dfacd05db5aefce6:85)

[antivir88]

in your's package.json section "main": "dist/vue-slick-carousel.umd.js" for install without build

[kyuwoo-choi]

That's because webpack can't load the style. Try to configure node-sass & sass-loader for that.

[antivir88]

{ test: /\.s[ac]ss$/, exclude: /(node_modules|bower_components)/, use: [ {loader:"vue-style-loader"}, {loader:"css-loader?url=false"}, {loader:"postcss-loader"}, {loader:"sass-loader", options: { sassOptions: { indentedSyntax: true } }} ] },

[antivir88]

for sample:

add and configure rollup

import vue from 'rollup-plugin-vue' import babel from 'rollup-plugin-babel' import buble from 'rollup-plugin-buble' import { terser } from 'rollup-plugin-terser' import sass from 'rollup-plugin-sass' import pug from 'rollup-plugin-pug' import commonjs from 'rollup-plugin-commonjs' import resolve from 'rollup-plugin-node-resolve'

export default { input: 'src/index.js', // build script name output: { file: 'dist/your_filename.js', name: 'your_libname', format: 'umd', sourcemap: true, preferConst: false, globals: { vue: 'Vue' } }, external: [ 'vue' ], plugins: [ vue({ compileTemplate: true, css: true }), buble(), babel({ externalHelpers: true, runtimeHelpers: true, //exclude: 'node_modules/**', babelrc: true }), sass(), pug(), resolve({ jsnext: false, main: true, browser: true }), commonjs(), terser() ] }

next step, make build script, for sample:

import { SsAlert } from './components/ss-alert.vue'; import { SsBadge } from './components/ss-badge.vue';

const NAME = 'you_libname-camelCase';

const you_libname-camelCase = { install(Vue, options) { Vue.component('SsAlert', SsAlert); Vue.component('SsBadge', SsBadge); }, NAME };

// all items via vue.use export default you_libname-camelCase;

// one items via components: { name:()=>import('SsAlert') } export { SsAlert } from './components/ss-alert.vue'; export { SsBadge } from './components/ss-badge.vue';

after this steps your library using without build on clients...

package.json for build lib dist:

"build": "cross-env NODE_ENV=production rollup -c rollup.config.js ; npm run sass", "sass": "node-sass --output-style compressed assets/you_libname.sass -o dist",