I need to integrate vuetify into a project which can not use vue cli and has the following css/sass webpack config.
{
test: /\.s?[ac]ss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {url: false, sourceMap: true}
},
{
loader: 'sass-loader',
options: {sourceMap: true}
}
]
}
Vuetify config from docs
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
// webpackImporter: false,
sassOptions: {
fiber: require('fibers'),
indentedSyntax: true
},
prependData: "#import 'src/novosales/variables/scss/vuetifyCustomStyles.scss'"
}
}
]
}
After merging into existing config
{
test: /\.s?[ac]ss$/,
use: [
'vue-style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {url: false, sourceMap: true}
},
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
sourceMap: true,
sassOptions: {
fiber: require('fibers'),
indentedSyntax: true
},
prependData: "#import 'src/novosales/variables/scss/vuetifyCustomStyles.scss'",
}
}
]
}
I get error
While trying to solve I also got (expected linebreak) error, cant produce it right now.
I found a solution online but thats when using vue cli which is
// vue.config.js
css: {
loaderOptions: {
sass: {
data: '#import "~#/sass/main.scss"',
implementation: require("sass"),
fiber: require("fibers")
}
},
sourceMap: true
},
chainWebpack: config => {
["vue-modules", "vue", "normal-modules", "normal"].forEach((match) => {
config.module.rule('scss').oneOf(match).use('sass-loader')
.tap(opt => Object.assign(opt, { data: `#import '~#/sass/main.scss';` }))
});
}
I cant figure out how to achieve the same in this project and separate sass/scss.
Anyone already using vuetify without vue cli? thanks.
Related
I'm trying to use react-responsive-carousel library and in order to appear correctly it requires the import of
import 'react-responsive-carousel/lib/styles/carousel.min';
When I load up my app I'm not seeing the styles applied to the component. I'm guessing it had something to do with my webpack configuration but I haven't found a solution yet
webpack.config.common.js
module.exports = {
entry: ['core-js/stable', 'regenerator-runtime/runtime', paths.appIndexJs],
output: {
filename: '[name].[contenthash].js',
path: paths.appBuild,
publicPath: './'
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx', '.scss','.css'],
modules: ['node_modules']
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebPackPlugin({
filename: 'index.html',
inject: true,
template: paths.appHtml
}),
new ESLintPlugin({
formatter: eslintFormatter,
eslintPath: 'eslint',
resolvePluginsRelativeTo: __dirname
})
],
module: {
rules: [
{
test: /\.(js|ts)x?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
},
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: imageInlineSizeLimit,
name: 'static/media/[name].[hash:8].[ext]',
},
},
{
loader: require.resolve('file-loader'),
exclude: [/\.(js|mjs|jsx|ts|tsx|scss)$/, /\.html$/, /\.json$/],
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
}
]
}
}
webpack.config.dev.js
module.exports = merge(commonConfig, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
static: './dist',
port: 3001,
historyApiFallback: true
},
output: {
publicPath: '/'
},
module: {
rules: [
{
test:/\.css$/,
include: /node_modules/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: false
},
},
]
},
{
test:/\.(scss|sass|css)$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
modules: {
getLocalIdent: getCSSModuleLocalIdent
}
},
},
{
loader: 'postcss-loader',
options: {
//ident: 'postcss',
postcssOptions: {
plugins: () => [
require('postcss-flextbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3
}),
postcssNormalize()
]
}
}
},
'resolve-url-loader',
'sass-loader'
],
sideEffects: true
},
]
}
})
TestimonialsComponent.tsx
import React from 'react';
import { Carousel } from 'react-responsive-carousel';
import { testimonialsList, Testimonial } from '../Common/precious-testimonials';
import 'react-responsive-carousel/lib/styles/carousel.min.css';
type TestimonialElementProp = {
testimonial: Testimonial
}
const TestimonialElement = ({ testimonial }: TestimonialElementProp) => {
return <div>
<img src={testimonial.Image} />
<p>{testimonial.Quote}</p>
<h5>{testimonial.PersonName}</h5>
<h6>{testimonial.Title}</h6>
</div>
}
export const TestimonialsComponent = () => {
return <Carousel>
{testimonialsList.map((testmol) => {
return <TestimonialElement testimonial={testmol} />
})}
</Carousel>
}
Following the its npm page
Using webpack or parcel with a style loader
import styles from'react-responsive-carousel/lib/styles/carousel.min.css';
usually css files are imported in top level page of your application so that it will be loaded globally
import styles from'react-responsive-carousel/lib/styles/carousel.min.css';
import { Carousel } from 'react-responsive-carousel';
The issue here was that the css-loader was configured to not use the modules option. This meant that the css-loader was not applying the css classes correctly, because the modules option should be set to false when importing 3rd party css.
To fix this, the webpack config should be updated as follows:
module: {
rules: [
{
test:/\.css$/,
include: /node_modules/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: false
},
}
]
}
]
}
I am having an issue with my React app. I have added Webpack and it is compiling successfully but, at the moment of serving the content, the app shows no styles at all.
This is what I have so far in my webpack.config.js file:
const path = require('path');
const BUILD_DIR = path.resolve(__dirname + '/public/build');
const APP_DIR = path.resolve(__dirname + '/src');
// This is the main configuration object.
// Here, you write different options and tell Webpack what to do
module.exports = {
experiments: {
asyncWebAssembly: true,
topLevelAwait: true,
layers: true // optional, with some bundlers/frameworks it doesn't work without
},
resolve: {
extensions: ['', '.js', '.jsx', '.css']
},
// Path to your entry point. From this file Webpack will begin its work
entry: [APP_DIR + '/index.js', APP_DIR + '/index.css', APP_DIR + '/App.css'],
// Path and filename of your result bundle.
// Webpack will bundle all JavaScript into this file
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
// Default mode for Webpack is production.
// Depending on mode Webpack will apply different things
// on the final bundle. For now, we don't need production's JavaScript
// minifying and other things, so let's set mode to development
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true,
},
},
{ loader: 'sass-loader' },
{ loader: 'postcss-loader' }
],
},
]
}
};
Is there anything I am missing to get my css to work? I only have two files, located at /src: App.css and index.css. None of them seem to be loaded and I have no errors in the console.
rules: [
{
test: /\.js|jsx$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.(sass|scss|less|css)$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.(png|jpe?g|svg|gif)$/,
loader: 'file-loader'
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader',
]
},
{
test: /\.css$/,
use: [
{
loader: 'url-loader',
options: {
limit: false
}
}
]
}
]
Hi everyone I am using web-pack to try to replace a gulp build that was overly complicated. but was running into some issues when it came to the Css. We are using sass. We also have a project structure that has the sass files right by each of the the angular component so that means for every class there is a separate folder. Currently our gulp magically goes into the folders and downloads the sass.
But I can't get the extract-text-webpack-plugin to output me a separate Css file the source I am using for trying to do this is.
https://itnext.io/sharing-sass-resources-with-sass-resources-loader-and-webpack-ca470cd11746
here is my code
const config = {
entry: {
'app': './app/app.js',
// 'vendor': './src/vendor.module.js'
},
devtool: 'source-map',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist/dev')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: [ 'ng-annotate-loader', 'babel-loader' ]
},
// for fixing of loading bootstrap icon files
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader?limit=10000',
options: {
name: './fonts/[name].[ext]'
}
},
{
test: /\.(eot|ttf)$/,
loader: 'file-loader',
options: {
name: './fonts/[name].[ext]'
}
},
{
test: /\.html$/,
loader: 'html-loader',
options: {
attrs: [ 'attrs=false' ]
}
},
{
test: /\.scss$/,
use: ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
filename: path.resolve(__dirname, 'dist/dev') + 'app.css',
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
},
{
loader: 'sass-resources-loader',
options: {
resources: require(path.join(process.cwd(), './app/appscss.js'))
}
}
]
}),
},
/* ,
{
test: /\.(scss)$/,
use: ExtractTextWebpackPlugin.extract({
use: [
{
loader: "css-loader",
options: {
minimize: true
}
},
{
loader: "sass-loader"
}
]
})
} */
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
comments: false,
sourceMap: true,
}),
new ExtractTextWebpackPlugin('app.css', {
allChunks: true
}),
new webpack.DefinePlugin({
GULP_REPLACE_ENV_URL: JSON.stringify(environementUrl())
})
],
devServer: {
port: 5000,
contentBase: path.resolve(__dirname, 'dist/dev'),
historyApiFallback: true,
// needed since we set api to something other than host
// http://flummox-engineering.blogspot.com/2017/10/webpack-dev-server-invalid-host-header-host-0.0.0.0-not-working-npm-dev-server.html
disableHostCheck: true
}
};
module.exports = config;
Any help would be much appreciated.
When using Gulp to convert Sass to CSS, I can choose output style of the CSS file between: nested, expanded, compact and compressed. Do I have the same opportunity using Webpack? If yes, can you show me how to configurate Webpack to achieve my goal?
Below is my current webpack.config.js - it converts sass to css, translate ES6 to ES5 and it works perfectly:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: [
"./js/app.js",
"./scss/main.scss"
],
output: {
filename: "./js/out.js"
},
watch: true,
module: {
loaders: [
{
test: /.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ["es2015"]
}
}
],
rules: [
{
test: /.scss$/,
use: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
use: ["css-loader?-url", "sass-loader?-url"]
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename: "./css/main.css",
disable: false,
allChunks: true
})
]
}
Thanks in advance!
You are using sass-loader, which uses node-sass under the hood. The readme says that you can pass options directly to node-sass by specifying an options property. You can pass in the outputStyle setting this way. It would look like this:
{
test: /.scss$/,
use: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
use: [{
loader: 'css-loader'
}, {
loader: 'sass-loader',
options: {
outputStyle: 'expanded'
}
}]
})
}
#Arnelle Balane
That ticked solution won't work with upgraded webpack and sass-loader.
This is the latest working model using:
"webpack": "^4.44.1",
"sass-loader": "~9.0.3",
{
test: /.scss$/,
use: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
use: [
{
loader: 'css-loader'
},
{
loader: 'sass-loader',
options: {
sassOptions: {
outputStyle: 'expanded'
}
}
}
]
})
}
UPDATE Wepback 5: ExtractTextplugin is now replace to MiniCSSExtraPlugin.
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
sassOptions: {
outputStyle: "expanded",
},
}
},
]
I'm really disheartened, because I can't find any useful resource on the subject.
I merely want to watch my .css files, use post css' plugins to transform them and finally export them to my /public folder as I already do with my .jsx files
Here's my web pack configuration
const path = require('path');
const webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: path.resolve('src/index.jsx'),
output: {
path: path.resolve('public'),
filename: 'bundle.js'
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
devServer: {
publicPath: "/",
contentBase: "./public"
},
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}, {
loader: 'postcss-loader',
options: {
plugins: function() {
return [require('lost'), require('postcss-cssnext'), require('postcss-import')]
}
}
}
]
})
}, {
test: /\.jsx?$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
],
exclude: /(node_modules|bower_components)/
}
]
},
plugins: [new ExtractTextPlugin("main.css")]
}
I assume you are using webpack2
If you want your css file dumped out separately, you would need ExtractTextPlugin. Here is my css loader which works
I define the post css plugins right within the webpack config, because then it stays in one place. Hope this helps:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
...
...
module.exports = {
...
...
module: {
rules: [
...
...
{
test: /\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract(
{ fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
modules: true,
localIdentName:'[name]__[local]___[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
require('autoprefixer')
]
}
}
},
]
})
},
}
Maybe your plugins are incorrectly created.
Try
return [require('lost')(), require('postcss-cssnext')(), require('postcss-import')()]
(Note the () to invoke the plugin creation).
Also are you actually using import/require() to include your css? If not you should, no magic stuff will glob your css :)