Menu
I want to be able to use absolute paths in @import statements. Something like:
@import '/templates/common/variables'
However, sass seems to resolve it as an absolute url within my filesystem. I want it to look in my project folder. Eg. my file is actually located at /home/username/project/templates/common/_variables.scss
Is that somehow possible?
I already looked at includePaths but that seems to do nothing at all.
I'm using encore to write my webpack file, it looks roughly like this:
const Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath("web/build/")
.setPublicPath("/build")
// [...]
.enableSassLoader(options => {
options.includePaths = [path.resolve(__dirname, '/web')];
})
;
And also here is the generated webpack configuration (quiet lengthy and i haven't replaced my real paths with my example paths from above):
{
context:'/var/www',
entry:{
index:[
'./polyfills.js',
'./web/typo3conf/ext/hn_project/ext_index.js',
'./web/typo3conf/ext/hn_templates/ext_index.js'
],
backend:[
'./polyfills.js',
'./web/typo3conf/ext/hn_project/ext_backend.js'
]
},
output:{
path:'/var/www/web/build',
filename:'[name].[chunkhash:8].js',
publicPath:'/build/',
pathinfo:false
},
module:{
rules:[
{
test:/\.jsx?$/,
exclude:/(node_modules|bower_components)/,
use:[
{
loader:'babel-loader',
options:{
cacheDirectory:true,
presets:[
[
'env',
{
modules:false,
targets:{
browsers:[
'and_chr 67',
'and_uc 11.8',
'chrome 67',
'chrome 66',
'chrome 65',
'edge 17',
'edge 16',
'firefox 60',
'firefox 59',
'firefox 52',
'ie 11',
'ie 10',
'ie_mob 11',
'ie_mob 10',
'ios_saf 11.3',
'ios_saf 11.0-11.2',
'opera 53',
'opera 52',
'safari 11.1',
'safari 11',
'samsung 6.2'
],
uglify:true
},
useBuiltIns:true
}
]
],
plugins:[
]
}
}
]
},
{
test:/\.css$/,
use:[
{
loader:'/var/www/node_modules/extract-text-webpack-plugin/dist/loader.js',
options:{
omit:1,
remove:true
}
},
{
loader:'style-loader'
},
{
loader:'css-loader',
options:{
minimize:true,
sourceMap:false,
importLoaders:1
}
},
{
loader:'postcss-loader',
options:{
sourceMap:false,
ident:'postcss',
plugins:[
{
[
Function:plugin
] options:{
grid:false
},
browsers:undefined,
info:[
Function
],
postcssPlugin:'autoprefixer',
postcssVersion:'6.0.23'
}
]
}
}
]
},
{
test:/\.(png|jpg|jpeg|gif|ico|svg|webp)$/,
loader:'url-loader',
options:{
name:'images/[name].[hash:8].[ext]',
publicPath:'/build/',
limit:4096
}
},
{
test:/\.(woff|woff2|ttf|eot|otf)$/,
loader:'url-loader',
options:{
name:'fonts/[name].[hash:8].[ext]',
publicPath:'/build/',
limit:4096
}
},
{
test:/\.s[ac]ss$/,
use:[
{
loader:'/var/www/node_modules/extract-text-webpack-plugin/dist/loader.js',
options:{
omit:1,
remove:true
}
},
{
loader:'style-loader'
},
{
loader:'css-loader',
options:{
minimize:true,
sourceMap:false,
importLoaders:1
}
},
{
loader:'postcss-loader',
options:{
sourceMap:false,
ident:'postcss',
plugins:[
{
[
Function:plugin
] options:{
grid:false
},
browsers:undefined,
info:[
Function
],
postcssPlugin:'autoprefixer',
postcssVersion:'6.0.23'
}
]
}
},
{
loader:'resolve-url-loader',
options:{
sourceMap:false
}
},
{
loader:'sass-loader',
options:{
sourceMap:true,
includePaths:[
'/web'
]
}
}
]
}
]
},
plugins:[
ExtractTextPlugin {
filename:'[name].[contenthash:8].css',
id:1,
options:{
allChunks:false
}
},
DeleteUnusedEntriesJSPlugin {
entriesToDelete:[
]
},
ManifestPlugin {
opts:{
publicPath:null,
basePath:'build/',
fileName:'manifest.json',
transformExtensions:/^(gz|map)$/i,
writeToFileEmit:true,
seed:null,
filter:null,
map:null,
generate:null,
sort:null,
serialize:[
Function:serialize
]
}
},
LoaderOptionsPlugin {
options:{
debug:false,
options:{
context:'/var/www',
output:{
path:'/var/www/web/build'
}
},
test:{
test:[
Function:test
]
}
}
},
HashedModuleIdsPlugin {
options:{
hashFunction:'md5',
hashDigest:'base64',
hashDigestLength:4
}
},
WebpackChunkHash {
algorithm:'md5',
digest:'hex',
additionalHashContent:[
Function
]
},
ProvidePlugin {
definitions:{
'$':'jquery',
jQuery:'jquery',
'window.jQuery':'jquery'
}
},
CleanWebpackPlugin {
paths:[
'**/*'
],
options:{
root:'/var/www/web/build',
verbose:false,
allowExternal:false,
dry:false
}
},
DefinePlugin {
definitions:{
'process.env':{
NODE_ENV:'"production"'
}
}
},
UglifyJsPlugin {
options:{
sourceMap:false
}
},
FriendlyErrorsWebpackPlugin {
compilationSuccessInfo:{
messages:[
]
},
onErrors:undefined,
shouldClearConsole:false,
formatters:[
[
Function:format
],
[
Function:format
],
[
Function:format
],
[
Function:format
],
[
Function:format
],
[
Function:format
]
],
transformers:[
[
Function:transform
],
[
Function:transform
],
[
Function:transform
],
[
Function:transform
],
[
Function:transform
],
[
Function:transform
]
]
},
AssetOutputDisplayPlugin {
outputPath:'web/build',
friendlyErrorsPlugin:FriendlyErrorsWebpackPlugin {
compilationSuccessInfo:{
messages:[
]
},
onErrors:undefined,
shouldClearConsole:false,
formatters:[
[
Function:format
],
[
Function:format
],
[
Function:format
],
[
Function:format
],
[
Function:format
],
[
Function:format
]
],
transformers:[
[
Function:transform
],
[
Function:transform
],
[
Function:transform
],
[
Function:transform
],
[
Function:transform
],
[
Function:transform
]
]
}
},
{
apply:[
Function:bound apply
]
},
ZopfliPlugin {
asset:'[path].gz[query]',
algorithm:[
Function
],
filename:false,
compressionOptions:{
verbose:false,
verbose_more:false,
numiterations:15,
blocksplitting:true,
blocksplittinglast:false,
blocksplittingmax:15
},
test:/\.(js|css|svg|ttf)$/,
threshold:1400,
minRatio:0.8,
deleteOriginalAssets:false
},
BrotliPlugin {
asset:'[path].br[query]',
test:/\.(js|css|svg|ttf)$/,
threshold:1400,
minRatio:0.8,
deleteOriginalAssets:false,
compress:[
Function
]
}
],
performance:{
hints:false
},
stats:{
hash:false,
version:false,
timings:false,
assets:false,
chunks:false,
maxModules:0,
modules:false,
reasons:false,
children:false,
source:false,
errors:false,
errorDetails:false,
warnings:false,
publicPath:false
},
resolve:{
extensions:[
'.js',
'.jsx',
'.vue',
'.ts',
'.tsx'
],
alias:{
}
},
externals:{
}
}
Also here some package versions that might be interesting
@symfony/[email protected]
[email protected]
[email protected]
[email protected]
494
You can use Webpack aliases. Resolving every import /templates to your project's templates/ folder.
const path = require('path');
module.exports = {
// ...
resolve: {
alias: {
'/templates': path.resolve(__dirname, './templates')
}
}
};
I read @sympony/webpack-encore and found addAliases setting. You can use as the following example.
const path = require('path');
const Encore = require('@symfony/webpack-encore');
Encore
// ...
.addAliases({
'/templates': path.resolve(__dirname, './templates')
});
In your Scss/SASS on import use ~ ahead file path.
@import '~/templates/common/variables'
@symfony/webpack-encore addAliases referencesass-loader import reference
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
