In Webpack, how to configure css loaders to use css files from specific path? I tried below code to fetch files from path 'src/styles', but did not work.
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
],
include: [
path.resolve(__dirname, "src/styles/" ),
]
}
]
I have 'style.css' under 'src/styles' folder. In 'index.js' I just did
import 'style.css'
because I want path to be resolved from loader.
When I build, getting below error:
**ERROR in ./src/index.js
Module not found: Error: Can't resolve 'style.css' in 'D:\webpack-demo\src'
# ./src/index.js 2:0-19**
Please help.
Related
I am attempting to create a storybook page which will display my CSS styling modules. I have looked at a few different methods and these are either deprecated or lead me to an error message.
I currently have a storybook/config.js which contains:
import requireContext from 'require-context.macro';
// automatically import all files ending in *.stories.js
//configure(require.context('../src/stories', true, /\.stories\.js$/), module);
import '../src/index.css';
import '../src/global/_global.css';
const req = requireContext('../src', true, /\.stories.js$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);
and a storybook/webpack.config.js which contains:
config.module.rules.push({
test: /\.scss$/,
loaders: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
require.resolve('sass-loader')
]
});
This is code I found both in the Storybook documentation and on previous SO posts.
I am receiving the following error:
Module not found: Error: Can't resolve '../src/global/_global.css'
I am wondering where I should be looking to find my global.css files?
Or if this method is no longer a working solution.
All help is appreciated.
I am learning angular 6 with #ngtools/webpack and I got a problem with dealing with css.
I have the following module rules in webpack.config.js
module: {
rules: [
{ test: /\.ts$/, loader: '#ngtools/webpack' },
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.css$/, loader: 'raw-loader' }
]
}
When I use Component.styleUrls, the angular compiler will use the 'raw-loader' and inline the Component.styleUrls to Component.styles. It works fine.
Then I want to install 'ngx-toastr', I added
import './../node_modules/ngx-toastr/toastr.css';
to my index.ts. It doesn't work because 'raw-loader' is used here.
How can I correctly import 'toastr.css'?
I think if you add that css to "style" in ".angular-cli.json" file it will work fine.
after adding to style it should look like this
"styles": [
"styles.css",
"node_modules/bootstrap/ngx-toastr/toastr.css"
]
Can you create anycomponent.scss file, import the toastr.scss file using relative file path.
import './../node_modules/ngx-toastr/toastr.css';
As the title.
Some of libraries I want to use (Ex: font-awesome) use scss, while I prefer writing style with sass
How can I configure my project with webpack?
My current setting
...
rules: [
...
{
test: /\.(c|sa|sc)ss$/,
use: [
'style-loader',
'css-loader',
'scss-loader',
'sass-loader'
]
}
]
...
Thank you in advance
You can use react-app-rewired. You can copy what I did in this commit
Or if you want to directly change the webpack.config.js file then:
npm install style-loader css-loader --save-dev
and then in your webpack.config.js, add the following object in your rules array as shown below.
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
}]
}
};
I have an issue where I import font awesome into my main scss file using #import. The issue is font awesome _varibles.scss uses a relative path to import its fonts ../fonts/*. This is causing an error because webpack is trying to load the file relative to the entry point which is the main sass file. I have been trying to use options such as includePaths with no luck and loaders like resolve-url-loader. I have tried multiple paths but no joy. the main.scss file is located in the sass folder along with a vendor folder that holds the font awesome data.
test: /\.scss$/,
use: [{
loader: "style-loader"
},
{
loader: 'css-loader'
},
{
loader: 'resolve-url-loader'
},
{
loader: 'sass-loader',
options: {
includePaths: [
path.resolve(__dirname, "assets/css/vendor/fontawsome/scss")
]
}
}
]
The issue isn't related to the fact that you misspelled fontawesome in your path?
"assets/css/vendor/fontawsome/scss"
I'm trying to get webpack to bundle all my stylesheets but I'm at a loss.
I don't want to use babel, so I try to do this in my main.js file:
require('./styles/core.css');
When I run webpack i get the following error:
You may need an appropriate loader to handle this file type.
My loader is:
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!scss'),
include: __dirname + '/app/styles'
}
]
Any ideas?
You have loader only for .scss and you are trying to use it on .css file. Change test in loader to:
test: /\.(css|scss)$/,