So I just discovered the susy framework to improve my scss files and I would like to use it inside my MEAN-app. I read the documents and followed the instructions. However, I am unable to use it inside my scss file. I followed the following steps:
install Susy: npm install susy
Make sure sass-loader is installed: npm install sass-loader --save-dev
Sass loader enabled in webpack configuration (webpack.confif.common.js):
module.exports = {
entry: {
'app': './assets/app/main.ts'
},
resolve: {
extensions: ['.js', '.ts']
},
module: {
rules: [
{
test: /\.html$/,
use: [{ loader: 'html-loader' }]
},
{
test: /\.css$/,
use: [{ loader: 'raw-loader' }]
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
],
exprContextCritical: false
}
};
Import susy in my app.component.scss: the website states that I should use #import "~susy/sass/susy"; but that gave me an error so I added a relative path: #import "../../node_modules/susy/sass/susy";
This is what my app.component.scss file looks like now:
#import "SCSS variables/theme-colors";
#import "../../node_modules/susy/sass/susy";
$susy: (
columns: 16,
debug: (image: show),
global-box-sizing: border-sizing
);
$medium-screen: 720px;
$link-color: #330000;
a {
color: $link-color;
&:hover {
color: lighten($link-color, 25%);
}
}
.container {
#include container();
}
**this is the Error I get **
cmd.exe /D /C call C:/Ruby25-x64/bin/scss.bat --no-cache --update
app.component.scss:app.component.css
error app.component.scss (Line 23: Undefined mixin 'container'.)
Process finished with exit code 1
Can someone see what I might've done wrong?
Related
If my application is using
test: /\.s+([ac])ss?/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[hash:base64:7]'
}
},
{
loader: 'sass-loader',
options: {
sourceMap: !isProductionEnvironment
}
},
{
loader: 'sass-resources-loader',
options: {
resources: 'src/styles/variables.scss'
}
}
]
webpack configuration to load css and sass, semantic-ui-sass package gets hashed upon import, is there a way to comfortably use semantic-ui-react package to decode those hashes?
Alternatively I am trying to use the
:global {
#import '~semantic-ui-sass/semantic-ui';
}
:global directive so that it could be used globally, but the webpack compiler then does not resolve icons and fonts from that package:
Module not found: Error: Can't resolve '../../icons/outline-icons.woff2'
Any ideas please?
I have solved the following issue by manually handling font icons and images by providing the semantic variables with their path:
<src/styles/global.scss>
$icons-font-path: '~semantic-ui-sass/icons';
$flags-image-path: '~semantic-ui-sass/images';
:global {
#import '~semantic-ui-sass/semantic-ui';
}
I have been using webpack 4.6.0:
I have following issue when compiling:
Uncaught Error: Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
| div {
| background-color: yellow;
| color: red;
my webpck config is as following:
var path = require('path');
var webpack = require('webpack');
module.exports = {
mode:'development',
entry: './src/code/app.js',
output: { path: __dirname, filename: 'bundle.js'},
watch: true,
module: {
rules: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
plugins: "transform-class-properties",
presets: ['es2015', 'react']
}
},
{
// Do not transform vendor's CSS with CSS-modules
// The point is that they remain in global scope.
// Since we require these CSS files in our JS or CSS files,
// they will be a part of our compilation either way.
// So, no need for ExtractTextPlugin here.
test: /\.css$/,
include: /node_modules/,
loader: 'css-loader'
}
]
}
};
and I have :
"css-loader": "^0.28.11",
and my file struct is like:
root:
-src
|-code
|-XXXX.js
|-css
|-HomePage.css
I think it is something related to my css loader, I have tried many methods online, but none of them works. Is there something related to my file structure?
I believe you still need to add a rule for your own css files. Try adding this to your rules.
{
// Preprocess your css files
// you can add additional loaders here (e.g. sass/less etc.)
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader'],
}
In my Vue component, I changed the language from the default CSS to the explicitly set SCSS, like this.
<style lang="scss">
div.bordy{ border: solid 3px red; }
</style>
I also changed the webpack.config.js according to this post by LinusBorg, so it looks like this.
module.exports = {
entry: ["babel-polyfill", "./index.js"],
output: { path: __dirname, filename: "bundle.js" },
module: {
loaders: [
{ test: /\.js$/, loader: "babel", exclude: /node_modules/ },
{ test: /\.vue$/, loader: "vue" },
// { test: /\.scss$/, loader: 'style!css!sass' },
{ test: /\.s[a|c]ss$/, loader: "style!css!sass" }
]
},
babel: {
presets: ["es2015", "stage-3"],
plugins: ["transform-runtime"]
},
vue: { loaders: [{ scss: "style!css!sass" }] },
resolve: { alias: { "vue$": "vue/dist/vue.common.js" } }
}
The guy explains that by doing so, we catch SCSS and map it to SASS. However, I'm getting an error saying the following.
Module not found: Error: Cannot resolve module 'scss-loader'
I've tried installing the packages as shown below but it gave no difference in the output error.
npm install scss-loader --save-dev
Here, I get uncertain and googlearching leads me to more confusion because I'm reading hints in all possible directions, not rarely commented with angry shouts of not resolving the issue.
Should I use style lang="sass" to being with?
When I try that, I have to install node-sass and I'm not sure if I'm resolving the problem or hiding it...
You have to install sass-loader and node-sass and it's resolving the problem not hiding it.
sass-loader documentation clearly says:
The sass-loader requires node-sass and webpack as peerDependency. Thus you are able to specify the required versions accurately.
and here are peerdependency from it's package.json:
"peerDependencies": {
"node-sass": "^3.4.2 || ^4.0.0",
.....
Which means sass-loader will work with these versions of node-sass.
It requires it in the very 4th line of it's code - sass-loader/index.js:
'use strict';
var utils = require('loader-utils');
var sass = require('node-sass');
Once you have it installed, you can do any of following:
<style lang="scss">
or
<style lang="sass">
as you are going to use same loader for both of these.
I'm using the tutorial here as a base, but I haven't any examples of how to import css files into an app. I've found bits and pieces but not enough to know how to do it. I've added "import styles from './styles/main.css';" into App.jsx and my webpack config is below.
var css = require("css!./main.css");
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.css$/,
loader: "style!css!"
}
]
}
}
module.exports = config;`
I get the error:
./styles/main.css
Module parse failed: C:\Projects\reactApp\styles\main.css Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:5)
That file only has div {} right now.
In your webpack config you only need to add style-loader and css-loader (you need to npm install it first):
{ test: /\.css$/, loader: 'style-loader!css-loader' },
Then you can require the CSS in your .js files (components):
require('./styles/main.css');
I'm trying to use FontAwesome in my app. I'm using webpack to do it's magic. My config is:
resolve: {
// you can now require('myfile') instead of require('myfile.cjsx')
extensions: ['', '.js', '.jsx', '.cjsx', '.coffee']
},
module: {
loaders: commonLoaders.concat([
{ test: /\.css$/, loader : 'style-loader!css-loader' },
{ test: /\.(ttf|eot|svg|woff(2))(\?[a-z0-9]+)?$/, loader : 'file-loader' },
{ test: /\.cjsx$/, loaders: ['react-hot', 'coffee', 'cjsx']},
{ test: /\.coffee$/, loader: 'coffee' },
{ test: /\.jsx$|\.js$/, loader: 'jsx-loader?harmony' },
])
}
I'm requesting FontAwesome CSS like that:
require "../../styles/font-awesome.min.css";
font-awesome.min.css contains this:
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
And for some reason, WebPack tries to parse .woff file with style-loader and gives me error:
ERROR in ./src/fonts/fontawesome-webfont.woff
Module parse failed: /var/www/app/src/fonts/fontawesome-webfont.woff Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
# ./~/css-loader!./src/styles/font-awesome.min.css 2:73-117
I'm really lost right now. Any ideas?
Update:
I'm completely lost right now. I've decided to fool around with my config and put this line in loaders:
{ test: /\.eot$/, loader : 'file' },
And required this file:
require "../../fonts/fontawesome-webfont.eot";
Got error:
ERROR in ./src/fonts/fontawesome-webfont.eot
Module parse failed: /var/www/app/src/fonts/fontawesome-webfont.eot Line 2: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
However, when I tried to require my file like this:
require "file!../../fonts/fontawesome-webfont.eot";
Everything went smooth. Looks like webpack ignores my loaders?
it depends on the url used in css.
this error is releated to regex, try to change (\?[a-z0-9]+) to (\?v=[0-9]\.[0-9]\.[0-9]) or (\?[\s\S]+).
Example:
https://github.com/gowravshekar/font-awesome-webpack
module.exports = {
module: {
loaders: [
// the url-loader uses DataUrls.
// the file-loader emits files.
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
]
}
};
https://github.com/shakacode/font-awesome-loader
module.exports = {
module: {
loaders: [
// the url-loader uses DataUrls.
// the file-loader emits files.
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
// Limiting the size of the woff fonts breaks font-awesome ONLY for the extract text plugin
// loader: "url?limit=10000"
loader: "url"
},
{
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
loader: 'file'
},
]
}
};
The other day I add the font-awesome through the LESS source so basically
npm install --save less-loader
bower install --save components-font-awesome
Then I require font awesome like this
require('bower_components/components-font-awesome/less/font-awesome.less')
And finally in the webpack.config.js I add the loader modules
var path = require('path')
module.exports = {
...
, module: {
loaders: [
{test: /\.less$/, loader: "style!css!less"},
{test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
]
}
};
I know that it not the same with .css but I believe that its easy this way. Hope it helps.