import Navbar from 'react-bulma-components/lib/components/navbar';
@import "~_variables.sass"
^
File to import not found or unreadable: ~_variables.sass.
in /var/www/snippy-snippets/node_modules/react-bulma-components/lib/components/utils.sass (line 3, column 1)
Couldn't find anything about this issue so i tried to import the navbar component with the other way that you provide on the README :
import { Columns } from 'react-bulma-components';
This import is working But the import way that is not working for me seems to be the "recommended" way in the README so i'd like to find out what is not working :(
const HtmlWebPackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const InterpolateHtmlPlugin = require('interpolate-html-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const devMode = process.env.NODE_ENV !== 'production';
const htmlPlugin = new HtmlWebPackPlugin({
template: './public/index.html',
filename: './index.html',
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
});
const cssExtractPlugin = new MiniCssExtractPlugin({
filename: devMode ? '[name].css' : 'static/css/[name].[hash].css',
chunkFilename: devMode ? '[id].css' : 'static/css/[name].[hash].chunk.css',
});
module.exports = {
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
]
},
entry: {
index: './src/index.js',
},
output: {
filename: 'static/js/[name].[hash].js',
},
devServer: {
contentBase: './dist',
hot: true,
},
module: {
rules: [
{
test: /\.ico$/,
loader: 'url-loader',
options: {
limit: 1,
name: '[name].[ext]',
},
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
'babel-loader',
'eslint-loader',
],
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true },
},
],
},
{
test: /\.(css|sass|scss)$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
minimize: true,
},
},
{
loader: 'postcss-loader',
options: {
autoprefixer: {
browsers: ['last 2 versions'],
},
plugins: () => [
autoprefixer,
],
},
},
{
loader: 'sass-loader',
options: {},
},
],
},
{
loader: 'file-loader',
// Exclude `js` files to keep "css" loader working as it injects
// it's runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.(css|sass|scss)$/],
options: {
name: 'static/media/[name].[ext]',
},
},
],
},
// extensions that webpack should resolve without explicit declaration
resolve: {
extensions: ['.js', '.jsx'],
},
plugins: [
htmlPlugin,
cssExtractPlugin,
new InterpolateHtmlPlugin({
'NODE_ENV': 'development'
}),
new ManifestPlugin({
fileName: 'asset-manifest.json', // Not to confuse with manifest.json
}),
new SWPrecacheWebpackPlugin({
// By default, a cache-busting query parameter is appended to requests
// used to populate the caches, to ensure the responses are fresh.
// If a URL is already hashed by Webpack, then there is no concern
// about it being stale, and the cache-busting can be skipped.
dontCacheBustUrlsMatching: /\.\w{8}\./,
filename: 'service-worker.js',
logger(message) {
if (message.indexOf('Total precache size is') === 0) {
// This message occurs for every build and is a bit too noisy.
return;
}
/* eslint-disable-next-line */
console.log(message);
},
minify: true, // minify and uglify the script
navigateFallback: '/index.html',
staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
}),
new CopyWebpackPlugin([
{ from: 'public' }, // define the path of the files to be copied
]),
],
};
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent