Comments (10)
For reference, the final styleguidist config is as follow:
// styleguide.config.js
const path = require('path')
const config = {
webpackConfig: Object.assign({},
require('./build/webpack.base.conf.js')
),
styleguideDir: '../doc/app/components',
require: [
// Components style
path.join(__dirname, 'src/stylesheets/app.scss'),
// Custom doc style
path.join(__dirname, 'src-style/stylesheets/app.scss')
]
}
// Add additionnal scss loader for scss files
config.webpackConfig.module.rules.push({
test: /\.scss$/,
use: [
{
loader: 'style-loader' // creates style nodes from JS strings
},
{
loader: 'css-loader' // translates CSS into CommonJS
},
{
loader: 'sass-loader' // compiles Sass to CSS
}
]
})
module.exports = config
from vue-styleguidist.
Hi, which error returns in console?
from vue-styleguidist.
The error is like:
Cannot load ./src/stylesheets/app.scss: you may need an appropriate webpack loader to handle this file type.
The styleguidist config file is as follow:
const path = require('path')
module.exports = {
webpackConfig: Object.assign({},
require('./build/webpack.base.conf.js')
),
require: [
'babel-polyfill',
path.join(__dirname, 'src/stylesheets/app.scss'),
]
}
and the scss loaded ir defined in webpack.base.conf.js
...
from vue-styleguidist.
Ok, I see all this correct, show me the webpack configuration
from vue-styleguidist.
I upgraded from 1.2.3 to 1.2.4, and now i'm getting this error: Cannot read property '1' of null
. If the scss file is empty, it works, but as soon as there is content in it (even plain css), it breaks.
The webpack.base.conf.js may be a bit complicated but is as follow:
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
// Define some paths from the env
var entryApp = null
switch (process.env.NODE_ENV) {
case 'CSSRef':
case 'buildCSSRef':
entryApp = './src-style/main.js'
break
default:
entryApp = './src/main.js'
}
var envConfigKey = process.env.NODE_ENV
var isProduction = false
switch (process.env.NODE_ENV) {
case 'production':
envConfigKey = 'build'
isProduction = true
break
case 'development':
envConfigKey = 'dev'
break;
case 'buildCSSRef':
isProduction = true
break
}
console.log('NODE_ENV: ' + process.env.NODE_ENV)
console.log('Env config: ' + envConfigKey)
console.log('Entry point: ' + entryApp)
module.exports = {
entry: {
app: entryApp
},
output: {
path: config[envConfigKey].assetsRoot,
filename: '[name].js',
publicPath: config[envConfigKey].assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'cssref@': resolve('src-style')
}
},
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [
process.env.NODE_ENV === 'css-ref' || process.env.NODE_ENV === 'build-css-ref'
? resolve('src-style')
: [resolve('src'), resolve('test')]
]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
from vue-styleguidist.
I see that you have not added the sass-loader, that's why you can not import it.
module.exports = {
/*...*/
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
},
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig,
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [
process.env.NODE_ENV === 'css-ref' || process.env.NODE_ENV === 'build-css-ref'
? resolve('src-style')
: [resolve('src'), resolve('test')],
],
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader', // creates style nodes from JS strings
},
{
loader: 'css-loader', // translates CSS into CommonJS
},
{
loader: 'sass-loader', // compiles Sass to CSS
},
],
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]'),
},
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]'),
},
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
},
},
],
},
};
from vue-styleguidist.
oh !
Sorry about that, I removed it when I upgraded vue (from 2.3.x to 2.4.2), last time as it was stated in the docs of the template:
This boilerplate has pre-configured CSS extraction for most popular CSS pre-processors including LESS, SASS, Stylus, and PostCSS. To use a pre-processor, all you need to do is installing the appropriate webpack loader for it. [...]
And in fact, it worked without the loader configuration.
I re-added the loader and it now works like a charm. Thank you for your time and great work :)
from vue-styleguidist.
Perfect! @mtancoigne
from vue-styleguidist.
@mtancoigne
How do you then include the compiled css in styleguide app?
I have a single global css for all my components that in normal webpack I extract with ExtractTextPlugin and include via tag.
Right now I just see my css as a webpack module, but don't know how to apply it to the page.
from vue-styleguidist.
@elijahiuu I use Sass for the stylesheets, so I use sass in the styleguide... All I do is an import of the app's style :
styleguide-src/stylesheets/styleguide.scss :
// Redefine some vars as paths are wrong when importing the styles from the app
$icomoon-font-path: "../../static/fonts/icons";
$font-path: '../../static/fonts/GreatVibes-Regular.otf';
// App main scss file
@import "../src/stylesheets/app";
// Custom styleguide styles
// ...
As you use plain CSS, i don't really know how this could work for you :/
from vue-styleguidist.
Related Issues (20)
- [vue-docgen-api] Unable to resolve props doc with union types and defineProps HOT 2
- [vue-docgen-cli] Fails to render `@values` from Props
- TypeError: conf.optimization.minimizer(...).tap is not a function HOT 1
- Generation documentation of imported prop types HOT 4
- `deep` selector does not work
- Nuxt 3.6.5 with Nitro 2.5.2 : Warning: No webpack config found.
- Extract slot and property documentation from `defineSlots` HOT 1
- [vue-docgen-api] Events defined in short `defineEmits` form are ignored HOT 2
- SetupOptionsHandler Comment error HOT 1
- Trouble with Vue 2 + Typescript + Nuxt HOT 2
- Yarn issue: YN0002: vue-docgen-api@npm:4.74.1 doesn't provide vue (pde4ae), requested by vue-inbrowser-compiler-independent-utils HOT 5
- Document component self not working
- vue-docgen-cli + vue3: jsdoc not working HOT 2
- vue-docgen-cli: Line breaks should behave predictably
- Does vue-styleguidist support template refs? HOT 1
- vue-docgen-cli: Template util mdclean, escape arrow brackets in code HOT 3
- Is it possible to get type description string like TypeScript type HOT 2
- `defineModels` macro support HOT 1
- How to document slots when using jsx HOT 1
- Cannot read property '_t' of undefined" HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-styleguidist.